112 lines
3.9 KiB
Markdown
112 lines
3.9 KiB
Markdown
|
# Kirby – Code editor
|
|||
|
|
|
|||
|
|
Code editor field for Kirby 3 and 4.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<br/>
|
|||
|
|
|
|||
|
|
## 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](https://paypal.me/sylvainjl) or purchasing your license(s) through [my affiliate link](https://a.paddle.com/v2/click/1129/36369?link=1170).
|
|||
|
|
|
|||
|
|
- [1. Installation](#1-installation)
|
|||
|
|
- [2. Setup](#2-setup)
|
|||
|
|
- [3. Options](#3-options)
|
|||
|
|
- [4. Available languages](#4-available-languages)
|
|||
|
|
- [5. License](#5-license)
|
|||
|
|
- [6. Credits](#6-credits)
|
|||
|
|
|
|||
|
|
<br/>
|
|||
|
|
|
|||
|
|
## 1. Installation
|
|||
|
|
|
|||
|
|
Download and copy this repository to ```/site/plugins/code-editor```
|
|||
|
|
|
|||
|
|
Alternatively, you can install it with composer: ```composer require sylvainjule/code-editor```
|
|||
|
|
|
|||
|
|
<br/>
|
|||
|
|
|
|||
|
|
## 2. Setup
|
|||
|
|
|
|||
|
|
This field adds a code editor in the panel:
|
|||
|
|
|
|||
|
|
```yaml
|
|||
|
|
editor:
|
|||
|
|
label: My code editor
|
|||
|
|
type: code-editor
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
<br/>
|
|||
|
|
|
|||
|
|
## 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](https://getkirby.com/docs/reference/system/options/panel#custom-panel-css). First, set the `size` option to any string you'd like:
|
|||
|
|
|
|||
|
|
```yaml
|
|||
|
|
size: custom-size
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Then in your `panel.css`:
|
|||
|
|
|
|||
|
|
```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`:
|
|||
|
|
|
|||
|
|
```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,
|
|||
|
|
];
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
<br/>
|
|||
|
|
|
|||
|
|
## 4. Available languages
|
|||
|
|
|
|||
|
|
Currently supported languages are:
|
|||
|
|
|
|||
|
|
* `css`
|
|||
|
|
* `javascript`
|
|||
|
|
* `json`
|
|||
|
|
* `less`
|
|||
|
|
* `php`
|
|||
|
|
* `python`
|
|||
|
|
* `ruby`
|
|||
|
|
* `scss`
|
|||
|
|
* `yaml`
|
|||
|
|
|
|||
|
|
<br/>
|
|||
|
|
|
|||
|
|
## 5. License
|
|||
|
|
|
|||
|
|
MIT
|
|||
|
|
|
|||
|
|
<br/>
|
|||
|
|
|
|||
|
|
## 6. Credits
|
|||
|
|
|
|||
|
|
**Code editor:**
|
|||
|
|
|
|||
|
|
- [Vue Prism Editor](https://github.com/koca/vue-prism-editor)
|