PHPackages                             pimcore/tinymce-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. [Utility & Helpers](/categories/utility)
4. /
5. pimcore/tinymce-bundle

ActivePimcore-bundle[Utility & Helpers](/categories/utility)

pimcore/tinymce-bundle
======================

v1.0.4(7mo ago)03.4k↓30%2proprietaryJavaScriptPHP ~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0CI passing

Since Apr 30Pushed 2mo ago5 watchersCompare

[ Source](https://github.com/pimcore/tinymce-bundle)[ Packagist](https://packagist.org/packages/pimcore/tinymce-bundle)[ RSS](/packages/pimcore-tinymce-bundle/feed)WikiDiscussions 1.0 Synced 1mo ago

READMEChangelog (5)Dependencies (6)Versions (12)Used By (0)

Pimcore TinyMCE
===============

[](#pimcore-tinymce)

Important

This bundle is shipped with an unsupported TinyMCE version (6.x) for licensing reasons. TinyMCE 6.x is licensed under the MIT license and can be bundled with this POCL licensed package, but doesn't receive any furter (security) updates (end-of-life). TinyMCE >= 7.x is licensed under incompatible GPL license. If you'd like to continue to use TinyMCE in your project, please consider to license [Pimcore Enterprise Edition](https://pimcore.com/en/pricing), which includes an always up-to-date and licensed TinyMCE 7 version installed via Composer.

General
-------

[](#general)

TinyMCE bundle provides TineMCE as WYSIWYG-editor. Similar to Textarea and Input you can use the WYSIWYG editable in the templates to provide rich-text editing.

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

[](#installation)

Make sure the bundle is enabled in the `config/bundles.php` file. The following lines should be added:

```
use Pimcore\Bundle\TinymceBundle\PimcoreTinymceBundle;
// ...

return [
    // ...
    PimcoreTinymceBundle::class => ['all' => true],
    // ...
];
```

```
bin/console pimcore:bundle:install PimcoreTinymceBundle
```

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

[](#configuration)

Available configuration options can be found here: [config options](https://www.tiny.cloud/docs/configure/)

Default Configuration
---------------------

[](#default-configuration)

`convert_unsafe_embeds` is set to `true` by default. This means that unsafe elements like `` or `` will be converted to more restrictive alternatives. For more details please take a look at the [TinyMCE documentation](https://www.tiny.cloud/docs/configure/content-filtering/#convert_unsafe_embeds).

Examples
--------

[](#examples)

### Basic usage

[](#basic-usage)

`wysiwyg` helper doesn't require any additional configuration options. The following code add a second toolbar.

```

    {{  pimcore_wysiwyg("specialContent", {
            toolbar2: 'forecolor | h1 | h2'
        })
    }}

```

[![Wysiwyg with extended toolbar - editmode](./doc/img/editables_wysiwyg_toolbar_editmode.png)](./doc/img/editables_wysiwyg_toolbar_editmode.png)

### Custom configuration for TinyMCE

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

The complete list of configuration options you can find in the [TinyMCE toolbar documentation](https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/).

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 `toolbar1` option.

```

    {{  pimcore_wysiwyg("specialContent", {
        toolbar1: 'forecolor | h1 | h2'
        })
    }}

```

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 TinyMCE in all document editables.

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

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

pimcore.plugin.YourTinymceEditorConfigBundle = 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 YourTinymceEditorConfigBundlePlugin = new pimcore.plugin.YourTinymceEditorConfigBundle();

```

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`:

```