Skip to content

Commit 12bcd7b

Browse files
solveratsolverat
committed
add quill support
1 parent 39fc2f3 commit 12bcd7b

File tree

7 files changed

+151
-28
lines changed

7 files changed

+151
-28
lines changed

‎UPGRADE.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Upgrade Notes
22

3+
## 5.3.0
4+
- [ENHANCEMENT] [Quill Editor Bundle](https://github.com/pimcore/quill-bundle) Support added. See [Editor Configuration Section](./docs/13_Wysiwyg_Editor.md#quill)
5+
36
## 5.2.2
47
- [ENHANCEMENT] Ignore disabled area bricks in autoload watcher pass
58

‎config/services/event.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ services:
66
public: false
77

88
ToolboxBundle\EventListener\Admin\AssetListener:
9+
arguments:
10+
$enabledWysiwygEditorName: '%toolbox.wysiwyg_editor%'
911
tags:
1012
- { name: kernel.event_subscriber }
1113

‎docs/13_Wysiwyg_Editor.md

Lines changed: 103 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,22 @@ There are several reasons for that:
77
- Define custom styles via configuration
88
- Use the same editor layout in every wysiwyg element (Document, Emails, Objects)
99

10-
> Currently, only TinyMce Editor is supported!
10+
## Supported Editors
11+
- [TinyMCE (default)](#tinymce)
12+
- [Quill](#quill)
1113

14+
> [!IMPORTANT]
15+
> Depending on the installed editor bundle,
16+
> toolbox **automatically enables** the corresponding extension configuration!
17+
18+
***
19+
20+
## TinyMCE
1221

13-
## TinyMce Toolbar
14-
The Toolbox Bundle already removes some (mostly dangerous) elements. Feel free to modify them according to your needs.
15-
Checkout the [available toolbar buttons](https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/) to do that.
22+
### Toolbar
23+
Checkout the [available toolbar buttons](https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/).
1624

25+
> [!TIP]
1726
> Info: This is the global configuration for the TinyMCE-Editor Toolbar.
1827
> If you need to provide a different configuration in objects or areas, use the object/area configuration (see below)
1928
@@ -38,7 +47,7 @@ toolbox:
3847
> If your extending style formats, you also have to extend the [html sanitize](https://pimcore.com/docs/platform/Pimcore/Documents/Editables/WYSIWYG/#extending-symfony-html-sanitizer-configuration)
3948
> otherwise you're applied data will be removed after persisting!
4049
41-
### Area Editor Configuration
50+
#### Area Editor Configuration
4251
If you only need to modify the toolbar configuration for document areas, add this to your configuration:
4352

4453
**Example**
@@ -51,7 +60,7 @@ toolbox:
5160
toolbar2: 'blocks'
5261
```
5362
54-
### Object Editor Configuration
63+
#### Object Editor Configuration
5564
If you only need to modify the toolbar configuration for objects, add this to your configuration:
5665
5766
> [!NOTE]
@@ -66,22 +75,104 @@ toolbox:
6675
config:
6776
# this will change the toolbar2 only for object editors
6877
toolbar2: 'blocks'
69-
7078
```
7179
72-
## TinyMce Editor Plugins
73-
Toolbox provides some additional Editor Plugins:
80+
#### TinyMce Editor Plugins
81+
Toolbox provides some additional Editor Plugins
7482
75-
### Google Opt Out
83+
##### Google Opt Out
7684
![editor-google-opt-out](https://user-images.githubusercontent.com/700119/37820009-9dd6a418-2e7f-11e8-94b4-99c7a001a3a9.png)
7785
78-
Add a link to allow user to disable google analytics tracking.
86+
Add a link to allow user to disable Google Analytics tracking.
7987
There is also a [frontend Javascript Plugin](./80_Javascript.md).
8088
81-
#### Enable Button
89+
##### Enable Button
8290
```yaml
8391
toolbox:
8492
wysiwyg_editor:
8593
config:
8694
toolbar2: 'tb_goo_link_button'
8795
```
96+
97+
***
98+
99+
## Quill
100+
101+
### Toolbar
102+
Checkout the [available toolbar buttons](https://quilljs.com/docs/modules/toolbar).
103+
104+
> [!TIP]
105+
> Info: This is the global configuration for the Quill-Editor Toolbar.
106+
> If you need to provide a different configuration in objects or areas, use the object/area configuration (see below)
107+
108+
### Overriding Configuration
109+
110+
> [!CAUTION]
111+
> Because pimcore only uses a simple `Object.assign()` method to merge the configuration,
112+
> you have to pass the full configuration (even if you only want to change the toolbar config)
113+
114+
**Example**
115+
```yaml
116+
toolbox:
117+
wysiwyg_editor:
118+
config:
119+
modules:
120+
table: false
121+
table-better:
122+
language: 'en_US'
123+
menus: [ 'column', 'row', 'merge', 'table', 'cell', 'wrap', 'delete' ]
124+
toolbarTable: true
125+
keyboard:
126+
bindings: QuillTableBetter.keyboardBindings
127+
history:
128+
delay: 700
129+
maxStack: 200
130+
userOnly: true
131+
toolbar:
132+
container: [
133+
[ { header: [ 1, 2, false ] } ],
134+
[{ 'size': ['small', false, 'large', 'huge'] }], # custom dropdown (
135+
[ 'bold' ],
136+
[ { align: [ ] } ],
137+
[ { list: 'ordered' } ],
138+
[ 'link', 'table-better' ],
139+
[ 'clean' ],
140+
]
141+
142+
```
143+
> [!IMPORTANT]
144+
> If your extending style formats, you also have to extend the [html sanitize](https://pimcore.com/docs/platform/Pimcore/Documents/Editables/WYSIWYG/#extending-symfony-html-sanitizer-configuration)
145+
> otherwise you're applied data will be removed after persisting!
146+
147+
#### Area Editor Configuration
148+
If you only need to modify the toolbar configuration for document areas, add this to your configuration:
149+
150+
**Example**
151+
```yaml
152+
toolbox:
153+
wysiwyg_editor:
154+
area_editor:
155+
config:
156+
# his will change the modules only for document editables editors
157+
modules: [...]
158+
```
159+
160+
#### Object Editor Configuration
161+
If you only need to modify the toolbar configuration for objects, add this to your configuration:
162+
163+
> [!NOTE]
164+
> The object configuration does not respect different toolbox context environments at the moment.
165+
> Objects are not restricted to any sites by nature which makes any context-binding quite impossible.
166+
167+
**Example**
168+
```yaml
169+
toolbox:
170+
wysiwyg_editor:
171+
object_editor:
172+
config:
173+
# this will change the modules only for object editors
174+
modules: 'blocks'
175+
```
176+
177+
#### Quill Editor Plugins
178+
Currently no plugins available.

‎public/js/quill/.gitkeep

Whitespace-only changes.

‎public/js/toolbox-wysiwyg-plugins.js renamed to ‎public/js/tinymce/google-opt-out-button.js

File renamed without changes.

‎src/DependencyInjection/ToolboxExtension.php

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
namespace ToolboxBundle\DependencyInjection;
44

5+
use Pimcore\Bundle\QuillBundle\PimcoreQuillBundle;
56
use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
67
use Symfony\Component\DependencyInjection\Loader\YamlFileLoader;
78
use Symfony\Component\HttpKernel\DependencyInjection\Extension;
@@ -22,6 +23,9 @@ public function prepend(ContainerBuilder $container): void
2223
$wysiwygEditor = null;
2324
if ($container->hasExtension('pimcore_tinymce') === true) {
2425
$wysiwygEditor = 'tiny_mce';
26+
} elseif (class_exists(PimcoreQuillBundle::class, false)) {
27+
// no extension definition set in quill bundle...
28+
$wysiwygEditor = 'quill';
2529
}
2630

2731
$coreLoader = new YamlFileLoader($container, new FileLocator(__DIR__ . '/../../config'));
@@ -80,7 +84,7 @@ public function load(array $configs, ContainerBuilder $container): void
8084
$configManagerDefinition = $container->getDefinition(ConfigManager::class);
8185
$configManagerDefinition->addMethodCall('setConfig', [$config]);
8286

83-
$disabledAreaBricks = array_filter($config['areas'], static function(array $area) {
87+
$disabledAreaBricks = array_filter($config['areas'], static function (array $area) {
8488
return $area['enabled'] === false;
8589
});
8690

‎src/EventListener/Admin/AssetListener.php

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88

99
class AssetListener implements EventSubscriberInterface
1010
{
11+
public function __construct(protected string $enabledWysiwygEditorName)
12+
{
13+
}
14+
1115
public static function getSubscribedEvents(): array
1216
{
1317
return [
@@ -27,24 +31,43 @@ public function addEditModeCssFiles(PathsEvent $event): void
2731

2832
public function addJsFiles(PathsEvent $event): void
2933
{
30-
$event->addPaths([
31-
'/admin/toolbox-wysiwyg-object-style.js',
32-
'/bundles/toolbox/js/toolbox-wysiwyg-plugins.js',
33-
'/bundles/toolbox/js/document/edit.js'
34-
]);
34+
$event->addPaths(
35+
array_merge(
36+
$this->getEditorJsResources(),
37+
[
38+
'/admin/toolbox-wysiwyg-object-style.js',
39+
'/bundles/toolbox/js/document/edit.js'
40+
]
41+
)
42+
);
3543
}
3644

3745
public function addEditModeJsFiles(PathsEvent $event): void
3846
{
39-
$event->addPaths([
40-
'/bundles/toolbox/js/toolbox-wysiwyg-plugins.js',
41-
'/bundles/toolbox/js/document/editables/area.js',
42-
'/bundles/toolbox/js/document/editables/areablock.js',
43-
'/bundles/toolbox/js/document/editables/googlemap.js',
44-
'/bundles/toolbox/js/document/editables/parallaximage.js',
45-
'/bundles/toolbox/js/document/editables/columnadjuster.js',
46-
'/bundles/toolbox/js/document/editables/vhs.js',
47-
'/bundles/toolbox/js/document/editables/vhs/editor.js',
48-
]);
47+
$event->addPaths(
48+
array_merge(
49+
$this->getEditorJsResources(),
50+
[
51+
'/bundles/toolbox/js/document/editables/area.js',
52+
'/bundles/toolbox/js/document/editables/areablock.js',
53+
'/bundles/toolbox/js/document/editables/googlemap.js',
54+
'/bundles/toolbox/js/document/editables/parallaximage.js',
55+
'/bundles/toolbox/js/document/editables/columnadjuster.js',
56+
'/bundles/toolbox/js/document/editables/vhs.js',
57+
'/bundles/toolbox/js/document/editables/vhs/editor.js',
58+
]
59+
)
60+
);
61+
}
62+
63+
private function getEditorJsResources(): array
64+
{
65+
return match ($this->enabledWysiwygEditorName) {
66+
'tiny_mce' => [
67+
'/bundles/toolbox/js/tinymce/google-opt-out-button.js'
68+
],
69+
'quill' => [],
70+
default => []
71+
};
4972
}
5073
}

0 commit comments

Comments
 (0)