Configure the HTML editor

The HTML editor can be configured as you need. You need a field with Data type: memo and HTML: HTML editor. Now you can configure the HTML editor configuration. The configuration is done in JSON format. The options you configure will overwrite the corresponding options in the default configuration.

Below is an example configuration.

• First we add content_css. This allows us to add styling to the HTML in the editor, so it will correspond to the read-only HTML as we present it on the web page.
• We set the  menubar (topmost bar) to false, so it will not show.
• The toolbar gets a specific configuration. With limited options we want to present to the user. Use spaces to delimit between the toolbar buttons. Use pipe characters to group buttons.
• Finally we set the valid_elements. By default the editor accepts all valid HTML elements. With this option you can limit the elements to the set you provide. The elements are comma seperated. Square brackets after an element contain the attributes allowed on the element. Pipe characters delimit between the attributes.

{
    "content_css": "/htmleditor.css", 
    "menubar": false,
    "toolbar": "bold italic strikethrough | formatselect | bullist numlist | image imagefinder  | pastetext | cx_formatcode | fullscreen",
    "valid_elements": "h1,h2,h3,h4,h5,h6,p,br,b,strong,i,ul[style],ol[style],li,span[class|style],code[class],pre[class|data-mode|data-readonly|data-autoheight]"
}

For more configuration options have a look at: https://www.tiny.cloud/docs/tinymce/5/configure/