Configure Pattern Options for TinyMCE in your custom Contenttype

This post is only for documentation. My Goal was a slim ui of the tiny-editor. No upload-button, no link-dialog button, not so much format stuff, no table-edit-button. I need this slim ui only for one contenttype, all others use the richtext behavior with all options. Here is my solution:

# the schema definiton in interfaces.py
from plone.app.textfield import RichText as RichTextField
from plone.app.z3cform.widget import RichTextFieldWidget
from plone.autoform import directives
from plone.supermodel import model
from my.addon.config import TINY_MCE_LIGHT_OPTIONS

class IMyAddonContentype(model.Schema):

    directives.widget(
        "text",
        RichTextFieldWidget,
        pattern_options=TINY_MCE_LIGHT_OPTIONS
    )
    text = RichTextField(
        title="Text",
        required=False,
    )
# the config.py with the modified pattern options
"""
for later: it's possible to make it configurable
via configuration controlpanel and plone.app.registry
something like this: 

from plone import api

TINY_MCE_LIGHT_OPTIONS= api.portal.get_registry_record(
    'TINY_MCE_LIGHT_OPTIONS',
    default={})

"""
TINY_MCE_LIGHT_OPTIONS = {
    "tiny": {
        "menu": {
            "edit": {
                "items": "undo redo",
                "title": "Edit",
            },
            "format": {
                "items": "bold italic underline | formats",
                "title": "Format",
            },
            "insert": {"items": "hr", "title": "Insert"},
            "table": {
                "items": "",
                "title": "Table",
            },
            "tools": {
                "items": "code",
                "title": "Tools",
            },
            "view": {
                "items": "",
                "title": "View",
            },
        },
        "menubar": ["edit", "table", "format", "toolsview", "insert"],
        "toolbar": "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
        "plugins": [
            "hr",
            "lists",
            "nonbreaking",
            "noneditable",
            "pagebreak",
            "paste",
            "code",
        ],
        "style_formats": [
            {
                "items": [
                    {"format": "h2", "title": "Header 2"},
                    {"format": "h3", "title": "Header 3"},
                    {"format": "h4", "title": "Header 4"},
                    {"format": "h5", "title": "Header 5"},
                    {"format": "h6", "title": "Header 6"},
                ],
                "title": "Headers",
            },
            {
                "items": [
                    {"format": "p", "title": "Paragraph"},
                    {"format": "blockquote", "title": "Blockquote"},
                    {"format": "div", "title": "Div"},
                    {"format": "pre", "title": "Pre"},
                ],
                "title": "Block",
            },
            {
                "items": [
                    {"format": "bold", "icon": "bold", "title": "Bold"},
                    {"format": "italic", "icon": "italic", "title": "Italic"},
                    {
                        "format": "underline",
                        "icon": "underline",
                        "title": "Underline",
                    },
                    {
                        "format": "strikethrough",
                        "icon": "strikethrough",
                        "title": "Strikethrough",
                    },
                    {
                        "format": "superscript",
                        "icon": "superscript",
                        "title": "Superscript",
                    },
                    {
                        "format": "subscript",
                        "icon": "subscript",
                        "title": "Subscript",
                    },
                    {"format": "code", "icon": "code", "title": "Code"},
                ],
                "title": "Inline",
            },
            {
                "items": [
                    {
                        "format": "alignleft",
                        "icon": "alignleft",
                        "title": "Left",
                    },
                    {
                        "format": "aligncenter",
                        "icon": "aligncenter",
                        "title": "Center",
                    },
                    {
                        "format": "alignright",
                        "icon": "alignright",
                        "title": "Right",
                    },
                    {
                        "format": "alignjustify",
                        "icon": "alignjustify",
                        "title": "Justify",
                    },
                ],
                "title": "Alignment",
            },
            {
                "items": [
                    {
                        "classes": "listing",
                        "selector": "table",
                        "title": "Listing",
                    }
                ],
                "title": "Tables",
            },
        ],
    }
}

The Result:

4 Likes

Why "toolsview" and not "tools", "view"?

Good Question :wink: . I will check it, perhaps a typo?

This was a typo in the settings and got fixed here: TinyMCE: Tools and View do not show up in menubar · Issue #3785 · plone/Products.CMFPlone · GitHub

1 Like