https://github.com/pimcore/tinymce-bundle
https://github.com/pimcore/tinymce-bundle
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pimcore/tinymce-bundle
- Owner: pimcore
- License: other
- Created: 2025-02-10T13:41:53.000Z (over 1 year ago)
- Default Branch: 1.x
- Last Pushed: 2025-07-10T12:08:38.000Z (11 months ago)
- Last Synced: 2025-07-10T15:25:57.287Z (11 months ago)
- Language: JavaScript
- Size: 936 KB
- Stars: 0
- Watchers: 8
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 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
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
Make sure the bundle is enabled in the `config/bundles.php` file. The following lines should be added:
```php
use Pimcore\Bundle\TinymceBundle\PimcoreTinymceBundle;
// ...
return [
// ...
PimcoreTinymceBundle::class => ['all' => true],
// ...
];
```
```bash
bin/console pimcore:bundle:install PimcoreTinymceBundle
```
## Configuration
Available configuration options can be found here: [config options](https://www.tiny.cloud/docs/configure/)
## 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
### Basic usage
`wysiwyg` helper doesn't require any additional configuration options.
The following code add a second toolbar.
```twig
{{ pimcore_wysiwyg("specialContent", {
toolbar2: 'forecolor | h1 | h2'
})
}}
```
### 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.
```twig
{{ pimcore_wysiwyg("specialContent", {
toolbar1: 'forecolor | h1 | h2'
})
}}
```
Now the user can use only the limited toolbar.
##### 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`:
```php
'onEditmodeJsPaths'
];
}
public function onEditmodeJsPaths(PathsEvent $event): void
{
$event->addPaths([
'/bundles/app/js/pimcore/editmode.js'
]);
}
}
```
### Loading additional TinyMCE plugins that are not shipped with this bundle
You can load additional plugins that are not shipped by default with Pimcore's TinyMCE bundle.
The following example adds the plugin `charmap` (Note: Included since Pimcore 11.4):
1) [Download](https://www.tiny.cloud/get-tiny/) a TinyMCE dist package matching the version the bundle is currently shipped with.
2) Extract the desired plugin from the TinyMCE dist package and place it in your app's or bundle's resource folder,
e.g. copy `js/tinymce/plugins/charmap/plugin.min.js` to `public/static/js/tinymce_plugins/charmap/plugin.min.js`.
3) Use TinyMCE's config option [`external_plugins`](https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#external_plugins)
to load the plugin:
```javascript
{
// ...
external_plugins: {
charmap: '/static/js/tinymce_plugins/charmap/plugin.min.js',
},
// ...
charmap: [/* ... */], // plugin's configuration
}
```