wagtailtinymce 4.2.1.4

A TinyMCE editor integration for Wagtail

Wagtail TinyMCE offers integration of the TinyMCE rich text editor into the Wagtail CMS.

As of Wagtail 1.5 this integrates using Wagtail’s alternative rich text editor feature and requires no extra customisation or patching.

Installation

Add wagtailtinymce to your INSTALLED_APPS Django setting.

Add or change WAGTAILADMIN_RICH_TEXT_EDITORS in your settings, to use the widget wagtailtinymce.rich_text.TinyMCERichTextArea.

For example, to use TinyMCE for all RichTextField and RichTextBlock instances:

WAGTAILADMIN_RICH_TEXT_EDITORS = {
    'default': {
        'WIDGET': 'wagtailtinymce.rich_text.TinyMCERichTextArea'
    },
}

Or, to use TinyMCE for certain instances…

WAGTAILADMIN_RICH_TEXT_EDITORS = {
    'default': {
        'WIDGET': 'wagtail.wagtailadmin.rich_text.HalloRichTextArea'
    },
    'tinymce': {
        'WIDGET': 'wagtailtinymce.rich_text.TinyMCERichTextArea'
    },
}

…and declare fields with the corresponding key in the editor parameter:

html_field = RichTextField(editor='tinymce', ...)
stream_field = StreamField([('html', RichTextBlock(editor='tinymce', ...)), ...])

TinyMCE configuration

The TinyMCERichTextArea constructor accepts keyword arguments for buttons, menus and options which are merged with defaults and passed to TinyMCE.

However, Wagtail does not currently allow for passing parameters to this constructor. To change the configuration you must create and register a subclass of TinyMCERichTextArea and pass these parameters or amend defaults in the subclass constructor.

Buttons

These are configured as a list of menu bars, each containing a list of groups, each containing a list of button names.

By default, TinyMCE is loaded with buttons for undo/redo, a styles dropdown, bold/italic, lists and tables, link/unlink, Wagtail documents/images/embeds, paste filter toggle and edit fullscreen.

Menu

These are configured as a list of menu names.

By default, TinyMCE is loaded with no menubar.

Options

This is a dict. By default, TinyMCE is loaded with the following options set:

• browser_spellcheck

• noneditable_leave_contenteditable (required for Wagtail image/embed handling)

• language (taken from Django settings)

• language_load

TinyMCE plugins and tools

TinyMCE is loaded with the following plugins:

• hr

• code

• fullscreen

• noneditable (required for Wagtail image/embed handling)

• paste

• table (and inserttable tool)

To add further plugins and tools to TinyMCE, use the insert_tinymce_js and insert_tinymce_css hooks. Once you have the hook in place use the following JavaScript to register the plugin with TinyMCE:

registerMCEPlugin(name, path, language);

For example:

registerMCEPlugin('myplugin', '/static/js/my-tinymce-plugin.js', 'en_GB');

The language parameter is optional and can be omitted.

A complete wagtail_hooks.py file example:

import json

from django.templatetags.static import static
from django.utils import translation
from django.utils.html import format_html
from django.utils.safestring import mark_safe
from wagtail.wagtailcore import hooks

@hooks.register('insert_tinymce_js')
def my_plugin_js():
    return format_html(
        """
        <script>
            registerMCEPlugin("myplugin", {});
        </script>
        """,
        mark_safe(json.dumps(static('js/my-tinymce-plugin.js'))),
        to_js_primitive(translation.to_locale(translation.get_language())),
    )

Versioning

The version number of this package is the TinyMCE version, followed by the release number of this package for that TinyMCE version.

Changes

4.2.1.4 (2016-06-01)

• Update to use Wagtail 1.5 pluggable rich text editor mechanism.

• Refactor link and doclink plugins to remove race condition.

• Add link editing and unlinking in line with Wagtail 1.5 Hallo editor.

• Fixes around editing of doclinks with link editor.

• Refactored settings to allow per-field variation.

• Made default menu/toolbar settings more Wagtail friendly.

4.2.1.3 (unreleased)

• No changes.

4.2.1.2 (unreleased)

• Add further button and menubar settings.

• Persist TinyMCE content to form on change to avoid losing content on preview with validation errors.

4.2.1.1 (unreleased)

• Bug fixes relating to page/document link handlers.

• Add image/embed editing (requires custom Wagtail).

• Add image/embed caption field (requires custom Wagtail).

4.2.1.0 (unreleased)

• Initial release.

License

This package is copyright (c) 2016, Isotoma Limited All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

• Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

• Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

• Neither the name of the Isotoma Limited nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL ISOTOMA LIMITED BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Attributions

This package includes TinyMCE 4.x which is licensed under the LGPLv2.1.

Icons for TinyMCE are generated and provided by the http://icomoon.io service.

The Document icon is from Wagtail’s own icon font which is generated and provided by the http://icomoon.ico service.