|
6 | 6 | [](https://github.com/breadlesscode/neos-simple-editor-extend/stargazers)
|
7 | 7 | [](https://github.com/breadlesscode/neos-simple-editor-extend/subscription)
|
8 | 8 |
|
9 |
| -This is a small plugin to simply add some buttons to the Neos CMS CKEditor, without writing any JavaScript code. You only need to compose a YAML-File. |
| 9 | +This is a small plugin to simply add some buttons and dropdowns for formatting text to the Neos CMS CKEditor, without writing any JavaScript code. |
| 10 | +You only need to compose a YAML-File. |
10 | 11 |
|
11 | 12 | ## Installation
|
12 |
| -Most of the time you have to make small adjustments to a package (e.g., the configuration in Settings.yaml). Because of that, it is important to add the corresponding package to the composer from your theme package. Mostly this is the site package located under Packages/Sites/. To install it correctly go to your theme package (e.g.Packages/Sites/Foo.Bar) and run following command: |
| 13 | +Most of the time you have to make small adjustments to a package (e.g., the configuration in `Settings.yaml`). |
| 14 | +Because of that, it is important to add the corresponding package to the composer from your theme package. |
| 15 | +Mostly this is the site package located under `Packages/Sites/`. |
| 16 | +To install it correctly go to your theme package (e.g. `Packages/Sites/Foo.Bar`) and run following command: |
13 | 17 |
|
14 | 18 | ```bash
|
15 | 19 | composer require breadlesscode/neos-simple-editor-extend --no-update
|
16 | 20 | ```
|
17 | 21 |
|
18 |
| -The --no-update command prevent the automatic update of the dependencies. After the package was added to your theme composer.json, go back to the root of the Neos installation and run composer update. Your desired package is now installed correctly. |
| 22 | +The --no-update command prevent the automatic update of the dependencies. |
| 23 | +After the package was added to your theme `composer.json`, go back to the root of the Neos installation and run composer update. |
| 24 | +Your desired package is now installed correctly. |
19 | 25 |
|
20 | 26 | ## Demo
|
21 | 27 |
|
22 | 28 | 
|
23 | 29 |
|
24 |
| -## Example configuration |
| 30 | +## Example configuration for applying a single style via a button |
25 | 31 |
|
26 | 32 | ```yaml
|
27 | 33 | Neos:
|
@@ -65,5 +71,62 @@ Now you can use your new formattings like this:
|
65 | 71 | 'Test.Test:MyCustomSpan2': true
|
66 | 72 | ```
|
67 | 73 |
|
| 74 | +## Example configuration for applying one or more style via a dropdown |
| 75 | +
|
| 76 | +```yaml |
| 77 | +Neos: |
| 78 | + Neos: |
| 79 | + Ui: |
| 80 | + frontendConfiguration: |
| 81 | + 'Breadlesscode.SimpleEditorExtend:Dropdowns': |
| 82 | + 'Breadlesscode.SimpleEditorExtend:Dropdowns.Colors': |
| 83 | + extensionName: 'colorAndSizeDropdown' |
| 84 | + icon: 'tint' |
| 85 | + tooltip: 'Mark the text in different colors and sizes' |
| 86 | + position: 'before strong' |
| 87 | + formatting: |
| 88 | + attributes: |
| 89 | + color: |
| 90 | + label: 'Color' |
| 91 | + placeholder: 'Choose color' |
| 92 | + placeholderIcon: 'tint' |
| 93 | + options: |
| 94 | + - label: 'None' |
| 95 | + icon: 'eraser' |
| 96 | + model: '' |
| 97 | + class: '' |
| 98 | + - label: 'Gelb' |
| 99 | + model: 'yellow' |
| 100 | + class: 'font-color--primary' |
| 101 | + - label: 'Blau' |
| 102 | + model: 'blue' |
| 103 | + class: 'font-color--secondary' |
| 104 | + size: |
| 105 | + label: 'Size' |
| 106 | + placeholder: 'Choose size' |
| 107 | + placeholderIcon: 'arrows-alt-v' |
| 108 | + options: |
| 109 | + - label: 'None' |
| 110 | + icon: 'eraser' |
| 111 | + model: '' |
| 112 | + class: '' |
| 113 | + - label: 'Very small' |
| 114 | + model: 'xxxsmall' |
| 115 | + class: 'font-size--xxxsmall' |
| 116 | +``` |
| 117 | +
|
| 118 | +Now you can use your new formattings like this: |
| 119 | +
|
| 120 | +```yaml |
| 121 | +'Neos.NodeTypes.BaseMixins:TextMixin': |
| 122 | + properties: |
| 123 | + text: |
| 124 | + ui: |
| 125 | + inline: |
| 126 | + editorOptions: |
| 127 | + formatting: |
| 128 | + 'Breadlesscode.SimpleEditorExtend:Dropdowns.Colors': true |
| 129 | +``` |
| 130 | +
|
68 | 131 | ## License
|
69 | 132 | The MIT License (MIT). Please see [License File](LICENSE) for more information.
|
0 commit comments