WYSIWYG Editor

Important

The English version of this Visual CMS documentation serves only as a basis and for developers and does not contain all details. More comprehensive documentation can be found in the German documentation.

The WYSIWYG Editor is part of the Content & Media Bundle and is included in all editions (CE, PE, EE). It is based on the open-source editor Summernote and provides rich text editing for admin content fields — long product and category descriptions, CMS pages, email templates, and any other admin detail view with a long-text field.

The WYSIWYG Editor uses the Media Library to embed media into text content. The Media Library must therefore be activated before the WYSIWYG Editor (see Installation).

When Visual CMS (Professional and Enterprise Edition) is also active, Visual CMS takes over CMS page editing with its widget-based editor. The WYSIWYG Editor remains active for all other text areas.

Extending the Editor

From WYSIWYG Editor 7 (Content & Media Bundle 10), modules can extend the editor through two Twig blocks: one to load custom Summernote plugins, one to modify the editor configuration.

Module Template Extension

Create a template extension in your module at:

views/twig/extensions/modules/ddoewysiwyg/ddoewysiwyg.html.twig

and extend the original editor template:

{% extends '@ddoewysiwyg/ddoewysiwyg.html.twig' %}

Loading Custom Summernote Plugins

Use the ddoe_wysiwyg_plugins block to include additional Summernote plugins — JavaScript files that add new editor functionality (print button, HTML cleaner, project-specific tools, etc.).

{% block ddoe_wysiwyg_plugins %}
    {{ parent() }}
    {{ script({ include: oViewConf.getModuleUrl('my_module', 'out/src/js/summernote-ext-print.js'), priority: 1, dynamic: __oxid_include_dynamic }) }}
    {{ script({ include: oViewConf.getModuleUrl('my_module', 'out/src/js/summernote-cleaner.js'), priority: 1, dynamic: __oxid_include_dynamic }) }}
{% endblock %}

Important

Always call {{ parent() }} to keep the editor’s default plugins. Without it, your plugin list replaces the defaults entirely.

Customising Editor Options

Use the ddoe_wysiwyg_summernote_options block to adjust the editor configuration — toolbar layout, available fonts, or any other Summernote option.

{% block ddoe_wysiwyg_summernote_options %}
    {{ parent() }}
    Object.assign(summernoteOptions, {
        fontNames: [
            'Arial', 'Courier New', 'Custom Font'
        ],
        fontNamesIgnoreCheck: ['Custom Font'],
        addDefaultFonts: false,
        toolbar: [
            ['formatting', ['bold', 'italic']],
            ['font', ['fontname', 'fontsize']],
            ['misc', ['cleaner', 'print', 'codeview']]
        ],
    });
{% endblock %}

This example reduces the toolbar to three groups, restricts the font list to three entries, and exposes the cleaner and print plugins (loaded via ddoe_wysiwyg_plugins) in the toolbar. The result in the admin area:

The toolbar customised through the OXID Examples Module — only Bold, Italic, Font Name, Font Size, Cleaner, Print, and Code View.

Hint

The full Summernote option reference is available in the Summernote documentation.

Complete Example

A working example that loads two plugins and customises the toolbar is provided in the OXID Examples Module (branch b-7.5.x) at:

views/twig/extensions/modules/ddoewysiwyg/ddoewysiwyg.html.twig