TinyMCE customization#
This chapter is a developer reference manual for customizing TinyMCE.
Remove imported formats#
Similar to adding formats, you can remove formats in a couple of ways.
Add-on GenericSetup configuration file#
Alternatively, you can use GenericSetup in your add-on.
<record field="content_css"
interface="plone.base.interfaces.controlpanel.ITinyMCESchema"
name="plone.content_css"
>
<value purge="true">
<element>++theme++barceloneta/tinymce/tinymce-ui-content.css</element>
</value>
</record>
Configure the TinyMCE control panel#
Plone 6 Classic UI ships with the Barceloneta theme which includes two custom formats, highlight-inline
and p.highlight-paragraph
, in the TinyMCE menu.
You can remove these formats through the TinyMCE control panel.
Navigate to
, or append@@tinymce-controlpanel
to the root of your website in your browser's location bar.Scroll down to Choose the CSS used in WYSIWYG Editor Area.
Remove the entry
++theme++barceloneta/tinymce/tinymce-formats.css
.Click the Save button.
Once removed, the custom formats will no longer appear in the menu.
Configure <iframe>
sandboxing#
Since version 7.0, TinyMCE adds the attribute sandbox=""
to make the <iframe>
elements sandboxed with all restrictions.
To customize this behavior, there are two options which you can add to the Other settings JSON configuration in the Advanced tab of the TinyMCE control panel.
If you want to deactivate sandboxing in general, use the following JSON configuration.
{
"sandbox_iframes": false
}
You can also exclude certain URLs from being sandboxed as follows.
{
"sandbox_iframes_exclusions": [
"my.url.com"
]
}
See also
See sandbox_iframes_exclusions
for TinyMCE's default settings.
Insert preconfigured HTML blocks#
You can add custom HTML blocks in TinyMCE. You can insert them in your content using the TinyMCE TinyMCE Template plugin.
menu option using theThis option is best for system administrators and developers who write their own add-ons to ease reproducibility.
You can add a GenericSetup configuration file to your add-on, such as profiles/default/registry/tinymce.xml
, with the configuration of the HTML blocks.
The following example adds three HTML files, each of which contains its custom HTML block.
<registry>
<record name="plone.templates" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="templates">
<field type="plone.registry.field.Text">
<default></default>
<description xmlns:ns0="http://xml.zope.org/namespaces/i18n" ns0:domain="plone" ns0:translate="help_tinymce_templates">Enter the list of templates in json format http://www.tinymce.com/wiki.php/Plugin:template</description>
<required>False</required>
<title xmlns:ns0="http://xml.zope.org/namespaces/i18n" ns0:domain="plone" ns0:translate="label_tinymce_templates">Templates</title>
</field>
<value>[
{"title": "Image and Text", "url": "++theme++my.theme/tinymce-templates/bs-dark-hero.html"},
{"title": "Image and Text", "url": "++theme++my.theme/tinymce-templates/bs-hero-left.html"},
{"title": "Image and Text", "url": "++theme++my.theme/tinymce-templates/bs-pricing.html"},
]
</value>
</record>
</registry>
Tip
The file profiles/default/registry.xml
can be split in several files in {file}
the directory profiles/default/registry
with arbitrary names ending in .xml
.
This makes it easier to maintain and reuse your registry files.