Blog

If you have ever tried to create anything more than the most basic HTML structure using the TinyMCE rich text editor in Plone 4, you know it can lead to a lot of frustration. For developers, that means we jump to source code editing mode.

But what about content editors who do not know HTML? We can accommodate their needs with overly granular custom content types or they'll have to sacrifice on the presentation by using the simple structures available in TinyMCE by default. Fortunately, those days are over.

Plone 5 has support for a TinyMCE plugin called Templates which can help bridge this gap. Templates enable a developer to create predefined chunks of HTML code that can be selected from a drop-down menu within the editor.

When a template is selected, its HTML is placed into the editor and the user can then customize it from there. Templates can be enabled in the *TinyMCE Settings* control panel *Plugins and Toolbar* tab or by adding the following snippet to /profiles/registry.xml in your custom product:

<!-- To enable templates and add to Insert menu -->
<record name="plone.custom_plugins" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="custom_plugins">
    <value>
        <element>template|+plone+static/components/tinymce-builded/js/tinymce/plugins/template</element>
    </value>
</record>

<!-- To add a button to the TinyMCE toolbar -->
<record name="plone.toolbar" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="toolbar">
    <value>ltr rtl | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | unlink plonelink ploneimage | template</value>
</record>

**Note**: If you have already customized the value of the plone.toolbar record, just add "| template" to your existing value. Then you add the HTML template files into a resource directory and add pointers in JSON to your registry.xml as well:

<record name="plone.templates" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="templates">
    <value>
        [
            {"title": "Promo Box", "url": "++theme++my.theme/tinymce_templates/promo-box.html"},
            {"title": "Promo Box with Image", "url": "++theme++my.theme/tinymce_templates/promo-box-image.html"},
            {"title": "Accordion Boxes", "url": "++theme++my.theme/tinymce_templates/accordion-boxes.html"}
        ]
    </value>
</record>

Combine this with some CSS and Javascript in your theme, and now non-technical users are able to add and edit sophisticated content on their sites.