search

sylvainjule / kirby-code-editor

Code editor field for Kirby 3 and 4
MIT License
35 stars 0 forks source link

readme

Kirby – Code editor

Code editor field for Kirby 3 and 4.

screenshot-code-editor


Overview

This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, please consider making a donation of your choice or purchasing your license(s) through my affiliate link.


1. Installation

Download and copy this repository to /site/plugins/code-editor

Alternatively, you can install it with composer: composer require sylvainjule/code-editor


2. Setup

This field adds a code editor in the panel:

editor:
  label: My code editor
  type: code-editor


3. Options

Name Type Default Options Description
language String 'css' - Syntax mode of the editor. See below for available languages
size String 'small' - Min height of the editor. small / medium / large / huge
lineNumbers Boolean true - Whether to show line numbers.
tabSize number 4 - The number of characters to insert when pressing tab key.
insertSpaces boolean true - Whether to use spaces for indentation. If you set it to false, you might also want to set tabSize to 1
ignoreTabKey boolean false - Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using Ctrl+Shift+M (Mac) / Ctrl+M manually when this is false.

Note that you can make the default height any height you want with some custom panel CSS. First, set the size option to any string you'd like:

size: custom-size

Then in your panel.css:

.k-code-editor-input[data-size="custom-size"] {
    min-height: 15rem;
}

3.1. Default options

You can globally override the default options, instead of setting them on a per-field basis. In your site/config/config.php:

return [
  'sylvainjule.code-editor.language'     => 'css',
  'sylvainjule.code-editor.size'         => 'small',
  'sylvainjule.code-editor.lineNumbers'  => true,
  'sylvainjule.code-editor.tabSize'      => 4,
  'sylvainjule.code-editor.insertSpaces' => true,
  'sylvainjule.code-editor.ignoreTabKey' => false,
];


4. Available languages

Currently supported languages are:


5. License

MIT


6. Credits

Code editor: