PHPackages                             six-it/quill-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. six-it/quill-bundle

ActivePimcore-bundle

six-it/quill-bundle
===================

6IT Quill Bundle

v1.0.0(3mo ago)031GPL-3.0-or-laterJavaScriptPHP ~8.1.0 || ~8.2.0 || ~8.3.0

Since Jan 27Pushed 3mo agoCompare

[ Source](https://github.com/6IT-Development/quill-bundle)[ Packagist](https://packagist.org/packages/six-it/quill-bundle)[ RSS](/packages/six-it-quill-bundle/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (6)Versions (4)Used By (1)

Quill WYSIWYG Pimcore Bundle
============================

[](#quill-wysiwyg-pimcore-bundle)

This bundle provides the [Quill 2.x](https://quilljs.com/) WYSIWYG editor integration for Pimcore. This includes the WYSIWYG for Documents, Data Objects and Shared Translations.

Installation
------------

[](#installation)

See [Installation](./doc/00_Installation.md)

Migration to Quill
------------------

[](#migration-to-quill)

See [Migration](./doc/01_Migration_to_Quill.md)

Configuration
-------------

[](#configuration)

Available configuration options can be found here: [config options](https://quilljs.com/docs/configuration/)

### Themes

[](#themes)

Available themes and how to configure it can be found here: [themes](https://quilljs.com/docs/customization/themes)

Examples
--------

[](#examples)

### Basic usage

[](#basic-usage)

`wysiwyg` helper doesn't require any additional configuration options. The following code customize the toolbar.

```

    {{  pimcore_wysiwyg("specialContent", {
            modules: {
                toolbar: {
                    container: [
                        [{ header: [1, 2, 3, 4, 5, 6, false] }]
                    ]
                }
            }
        })
    }}

```

### Custom configuration for Quill

[](#custom-configuration-for-quill)

A list of configuration options you can find in the [Quill toolbar documentation](https://quilljs.com/docs/modules/toolbar). In addition to this you can also configure `undo`, `redo` and `html-edit`.

The WYSIWYG editable allows us to specify the toolbar. If you have to limit styling options (for example only basic styles like `` tag and lists would be allowed), just use `toolbar` option.

```

    {{  pimcore_wysiwyg("specialContent", {
            modules: {
                toolbar: {
                    container: [
                        ['undo', 'redo'],
                        [{ header: [1, 2, 3, 4, 5, 6, false] }],
                        ['html-edit']
                    ]
                }
            }
        })
    }}

```

Now the user can use only the limited toolbar.

##### Global Configuration

[](#global-configuration)

You can add a Global Configuration for all WYSIWYG Editors for all documents by setting `pimcore.document.editables.wysiwyg.defaultEditorConfig`. You can add a Global Configuration for all WYSIWYG Editors for all data objects by setting `pimcore.object.tags.wysiwyg.defaultEditorConfig`.

For this purpose, you can create a [Pimcore Bundle](https://pimcore.com/docs/pimcore/current/Development_Documentation/Extending_Pimcore/Bundle_Developers_Guide/index.html) and add the configuration in a file in the `Resources/public` directory of your bundle (e.g. `Resources/public/js/editmode.js`).

```
pimcore.document.editables.wysiwyg = pimcore.document.editables.wysiwyg || {};
pimcore.document.editables.wysiwyg.defaultEditorConfig = { menubar: true };

```

This will show you the default menubar from Quill in all document editables.

For the data object settings, you should put them in the `startup.js` in your bundle.

```
pimcore.registerNS("pimcore.plugin.YourQuillEditorConfigBundle");

pimcore.plugin.YourQuillEditorConfigBundle = Class.create({

    initialize: function () {
        document.addEventListener(pimcore.events.pimcoreReady, this.pimcoreReady.bind(this));
    },

    pimcoreReady: function (e) {
        pimcore.object.tags.wysiwyg = pimcore.object.tags.wysiwyg || {};
        pimcore.object.tags.wysiwyg.defaultEditorConfig = { menubar: true };
    }
});

const YourQuillEditorConfigBundlePlugin = new pimcore.plugin.YourQuillEditorConfigBundle();

```

To load the `editmode.js` file in editmode, you need to implement `getEditmodeJsPaths` in your bundle class. Given your bundle is named `AppAdminBundle` and your `editmode.js` and `startup.js` created before was saved to `src/AppAdminBundle/public/js/editmode.js` and `src/AppAdminBundle/public/js/startup.js`:

```