add additionnalCss

2025-02-18 10:16:52 +01:00 · 2025-02-18 10:16:52 +01:00 · b4217f80d4
commit b4217f80d4
parent 08c2f57d6e
21 changed files with 7151 additions and 2 deletions
--- a/site/plugins/code-editor/README.md
+++ b/site/plugins/code-editor/README.md
@ -0,0 +1,111 @@
+# Kirby – Code editor
+
+Code editor field for Kirby 3 and 4.
+
+![screenshot-code-editor](https://user-images.githubusercontent.com/14079751/109679014-7b043800-7b7b-11eb-8c4e-2ae25da8288d.png)
+
+<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)