diff --git a/UPGRADE.md b/UPGRADE.md
index d1b45c26..799b3fab 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -1,5 +1,8 @@
# Upgrade Notes
+## 5.3.0
+- [ENHANCEMENT] [Quill Editor Bundle](https://github.com/pimcore/quill-bundle) Support added. See [Editor Configuration Section](./docs/13_Wysiwyg_Editor.md#quill)
+
## 5.2.2
- [ENHANCEMENT] Ignore disabled area bricks in autoload watcher pass
diff --git a/config/services/event.yaml b/config/services/event.yaml
index 095a7ea4..95def222 100644
--- a/config/services/event.yaml
+++ b/config/services/event.yaml
@@ -6,6 +6,8 @@ services:
public: false
ToolboxBundle\EventListener\Admin\AssetListener:
+ arguments:
+ $enabledWysiwygEditorName: '%toolbox.wysiwyg_editor%'
tags:
- { name: kernel.event_subscriber }
diff --git a/docs/13_Wysiwyg_Editor.md b/docs/13_Wysiwyg_Editor.md
index 71ec990b..3f2541a6 100644
--- a/docs/13_Wysiwyg_Editor.md
+++ b/docs/13_Wysiwyg_Editor.md
@@ -7,13 +7,22 @@ There are several reasons for that:
- Define custom styles via configuration
- Use the same editor layout in every wysiwyg element (Document, Emails, Objects)
-> Currently, only TinyMce Editor is supported!
+## Supported Editors
+- [TinyMCE (default)](#tinymce)
+- [Quill](#quill)
+> [!IMPORTANT]
+> Depending on the installed editor bundle,
+> toolbox **automatically enables** the corresponding extension configuration!
+
+***
+
+## TinyMCE
-## TinyMce Toolbar
-The Toolbox Bundle already removes some (mostly dangerous) elements. Feel free to modify them according to your needs.
-Checkout the [available toolbar buttons](https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/) to do that.
+### Toolbar
+Checkout the [available toolbar buttons](https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/).
+> [!TIP]
> Info: This is the global configuration for the TinyMCE-Editor Toolbar.
> If you need to provide a different configuration in objects or areas, use the object/area configuration (see below)
@@ -38,7 +47,7 @@ toolbox:
> 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)
> otherwise you're applied data will be removed after persisting!
-### Area Editor Configuration
+#### Area Editor Configuration
If you only need to modify the toolbar configuration for document areas, add this to your configuration:
**Example**
@@ -51,7 +60,7 @@ toolbox:
toolbar2: 'blocks'
```
-### Object Editor Configuration
+#### Object Editor Configuration
If you only need to modify the toolbar configuration for objects, add this to your configuration:
> [!NOTE]
@@ -66,22 +75,104 @@ toolbox:
config:
# this will change the toolbar2 only for object editors
toolbar2: 'blocks'
-
```
-## TinyMce Editor Plugins
-Toolbox provides some additional Editor Plugins:
+#### TinyMce Editor Plugins
+Toolbox provides some additional Editor Plugins
-### Google Opt Out
+##### Google Opt Out
-Add a link to allow user to disable google analytics tracking.
+Add a link to allow user to disable Google Analytics tracking.
There is also a [frontend Javascript Plugin](./80_Javascript.md).
-#### Enable Button
+##### Enable Button
```yaml
toolbox:
wysiwyg_editor:
config:
toolbar2: 'tb_goo_link_button'
```
+
+***
+
+## Quill
+
+### Toolbar
+Checkout the [available toolbar buttons](https://quilljs.com/docs/modules/toolbar).
+
+> [!TIP]
+> Info: This is the global configuration for the Quill-Editor Toolbar.
+> If you need to provide a different configuration in objects or areas, use the object/area configuration (see below)
+
+### Overriding Configuration
+
+> [!CAUTION]
+> Because pimcore only uses a simple `Object.assign()` method to merge the configuration,
+> you have to pass the full configuration (even if you only want to change the toolbar config)
+
+**Example**
+```yaml
+toolbox:
+ wysiwyg_editor:
+ config:
+ modules:
+ table: false
+ table-better:
+ language: 'en_US'
+ menus: [ 'column', 'row', 'merge', 'table', 'cell', 'wrap', 'delete' ]
+ toolbarTable: true
+ keyboard:
+ bindings: QuillTableBetter.keyboardBindings
+ history:
+ delay: 700
+ maxStack: 200
+ userOnly: true
+ toolbar:
+ container: [
+ [ { header: [ 1, 2, false ] } ],
+ [{ 'size': ['small', false, 'large', 'huge'] }], # custom dropdown
+ [ 'bold' ],
+ [ { align: [ ] } ],
+ [ { list: 'ordered' } ],
+ [ 'link', 'table-better' ],
+ [ 'clean' ],
+ ]
+
+```
+> [!IMPORTANT]
+> If your extending style formats (In this example the "size" dropdown), you also have to extend the [html sanitize](https://pimcore.com/docs/platform/Pimcore/Documents/Editables/WYSIWYG/#extending-symfony-html-sanitizer-configuration)
+> otherwise you're applied data will be removed after persisting!
+
+#### Area Editor Configuration
+If you only need to modify the toolbar configuration for document areas, add this to your configuration:
+
+**Example**
+```yaml
+toolbox:
+ wysiwyg_editor:
+ area_editor:
+ config:
+ # his will change the modules only for document editables editors
+ modules: [...]
+```
+
+#### Object Editor Configuration
+If you only need to modify the toolbar configuration for objects, add this to your configuration:
+
+> [!NOTE]
+> The object configuration does not respect different toolbox context environments at the moment.
+> Objects are not restricted to any sites by nature which makes any context-binding quite impossible.
+
+**Example**
+```yaml
+toolbox:
+ wysiwyg_editor:
+ object_editor:
+ config:
+ # this will change the modules only for object editors
+ modules: 'blocks'
+```
+
+#### Quill Editor Plugins
+Currently no plugins available.
diff --git a/public/js/quill/.gitkeep b/public/js/quill/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/public/js/toolbox-wysiwyg-plugins.js b/public/js/tinymce/google-opt-out-button.js
similarity index 100%
rename from public/js/toolbox-wysiwyg-plugins.js
rename to public/js/tinymce/google-opt-out-button.js
diff --git a/src/DependencyInjection/ToolboxExtension.php b/src/DependencyInjection/ToolboxExtension.php
index 40c58220..e3a2641b 100644
--- a/src/DependencyInjection/ToolboxExtension.php
+++ b/src/DependencyInjection/ToolboxExtension.php
@@ -2,6 +2,7 @@
namespace ToolboxBundle\DependencyInjection;
+use Pimcore\Bundle\QuillBundle\PimcoreQuillBundle;
use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
use Symfony\Component\DependencyInjection\Loader\YamlFileLoader;
use Symfony\Component\HttpKernel\DependencyInjection\Extension;
@@ -22,6 +23,9 @@ public function prepend(ContainerBuilder $container): void
$wysiwygEditor = null;
if ($container->hasExtension('pimcore_tinymce') === true) {
$wysiwygEditor = 'tiny_mce';
+ } elseif (class_exists(PimcoreQuillBundle::class, false)) {
+ // no extension definition set in quill bundle...
+ $wysiwygEditor = 'quill';
}
$coreLoader = new YamlFileLoader($container, new FileLocator(__DIR__ . '/../../config'));
@@ -80,7 +84,7 @@ public function load(array $configs, ContainerBuilder $container): void
$configManagerDefinition = $container->getDefinition(ConfigManager::class);
$configManagerDefinition->addMethodCall('setConfig', [$config]);
- $disabledAreaBricks = array_filter($config['areas'], static function(array $area) {
+ $disabledAreaBricks = array_filter($config['areas'], static function (array $area) {
return $area['enabled'] === false;
});
diff --git a/src/EventListener/Admin/AssetListener.php b/src/EventListener/Admin/AssetListener.php
index 55d1ca92..cf1e6b2f 100644
--- a/src/EventListener/Admin/AssetListener.php
+++ b/src/EventListener/Admin/AssetListener.php
@@ -8,6 +8,10 @@
class AssetListener implements EventSubscriberInterface
{
+ public function __construct(protected ?string $enabledWysiwygEditorName)
+ {
+ }
+
public static function getSubscribedEvents(): array
{
return [
@@ -27,24 +31,43 @@ public function addEditModeCssFiles(PathsEvent $event): void
public function addJsFiles(PathsEvent $event): void
{
- $event->addPaths([
- '/admin/toolbox-wysiwyg-object-style.js',
- '/bundles/toolbox/js/toolbox-wysiwyg-plugins.js',
- '/bundles/toolbox/js/document/edit.js'
- ]);
+ $event->addPaths(
+ array_merge(
+ $this->getEditorJsResources(),
+ [
+ '/admin/toolbox-wysiwyg-object-style.js',
+ '/bundles/toolbox/js/document/edit.js'
+ ]
+ )
+ );
}
public function addEditModeJsFiles(PathsEvent $event): void
{
- $event->addPaths([
- '/bundles/toolbox/js/toolbox-wysiwyg-plugins.js',
- '/bundles/toolbox/js/document/editables/area.js',
- '/bundles/toolbox/js/document/editables/areablock.js',
- '/bundles/toolbox/js/document/editables/googlemap.js',
- '/bundles/toolbox/js/document/editables/parallaximage.js',
- '/bundles/toolbox/js/document/editables/columnadjuster.js',
- '/bundles/toolbox/js/document/editables/vhs.js',
- '/bundles/toolbox/js/document/editables/vhs/editor.js',
- ]);
+ $event->addPaths(
+ array_merge(
+ $this->getEditorJsResources(),
+ [
+ '/bundles/toolbox/js/document/editables/area.js',
+ '/bundles/toolbox/js/document/editables/areablock.js',
+ '/bundles/toolbox/js/document/editables/googlemap.js',
+ '/bundles/toolbox/js/document/editables/parallaximage.js',
+ '/bundles/toolbox/js/document/editables/columnadjuster.js',
+ '/bundles/toolbox/js/document/editables/vhs.js',
+ '/bundles/toolbox/js/document/editables/vhs/editor.js',
+ ]
+ )
+ );
+ }
+
+ private function getEditorJsResources(): array
+ {
+ return match ($this->enabledWysiwygEditorName) {
+ 'tiny_mce' => [
+ '/bundles/toolbox/js/tinymce/google-opt-out-button.js'
+ ],
+ 'quill' => [],
+ default => []
+ };
}
}
diff --git a/tests/UnitDefault/Areas/LinkListTest.php b/tests/UnitDefault/Areas/LinkListTest.php
index 2067c37d..f26448e5 100644
--- a/tests/UnitDefault/Areas/LinkListTest.php
+++ b/tests/UnitDefault/Areas/LinkListTest.php
@@ -78,10 +78,10 @@ private function getCompare()
return '';
@@ -92,10 +92,10 @@ private function getCompareWithAdditionalClass()
return '';
diff --git a/tests/UnitDefault/Areas/TeaserTest.php b/tests/UnitDefault/Areas/TeaserTest.php
index cf1c99a9..536032fa 100644
--- a/tests/UnitDefault/Areas/TeaserTest.php
+++ b/tests/UnitDefault/Areas/TeaserTest.php
@@ -124,7 +124,7 @@ private function getCompare(\Pimcore\Model\Asset\Image $asset)
teaser headline
teaser text
-
+
@@ -141,7 +141,7 @@ private function getCompareWithLightBox(\Pimcore\Model\Asset\Image $asset)
' . $asset->getThumbnail('standardTeaser')->getHtml() . '
teaser headline
teaser text
-
+
@@ -159,7 +159,7 @@ private function getCompareWithAdditionalClass(\Pimcore\Model\Asset\Image $asset
teaser headline
teaser text
-
+