Updates to the TinyMCE 5 HTML editor

Changes from TinyMCE 4 to TinyMCE 5 might require you to make updates to maintain the functionality of the TinyMCE HTML editor. If you used a Widget Angular Provider to modify the editor in Service Portal widgets in previous releases, review these changes and make applicable updates.

Changes that can break custom TinyMCE implementations

Some changes can break custom TinyMCE implementations in Service Portal.

Note the following changes to themes and skins:

• The modern theme isn’t supported. Use the silver theme instead.
• The light gray skin isn’t supported. The default skin is oxide.

  The sn-editor-themed or sn-editor skins can also be used. The sn-editor-themed skin uses Now Design System (NDS) theming variables, and sn-editor uses hard-coded values.

  Note:

  To maintain the style of the light gray skin, use the following code in your style sheet:

  .tox .tox-toolbar-overlord {
        background-color: #f0f0f0 !important; 
     } 

Note the following changes to API method namespaces in Service Portal:

Table 1.

San Diego	Tokyo
ed.addButton	ed.ui.registry.addButton
onclick	onAction

Refer to the Tiny MCE5 documentation Migrating from TinyMCE 4 to TinyMCE 5 for additional information.

Additional changes

The following changes can affect customized TinyMCE implementations in Service Portal:

• The browser context menu for capabilities such as copy and paste are available by selecting control + click for Windows or command + click for Mac on your keyboard. Right-clicking opens the Link option instead of the browser context menu.
• HTML placeholders aren’t supported. Only string-based placeholders are supported.
• The custom readonly plugin isn’t available by default. You must add readonlynoborder to glide.ui.html.editor.v5.enabled_plugins.

• The new system property glide.ui.html.editor.default_link_target enables you to set a default target value for links. The string values include: '_blank', '', '_self', and '_top'. The default target value is ''.

• The resize option resizes the toolbar in addition to the editor. Add the min_height option to prevent resize from applying to the toolbar.
• resize isn’t supported for mobile.
• The toolbar_mode option is set to floating by default for desktop rather than wrap. Change this setting to restore the default appearance of TinyMCE 4.
• The toolbar_mode option is set to scroll by default for mobile rather than wrap. Change this setting for mobile to maintain the appearance of TinyMCE 4.
• The height option accounts for the entire height of the editor and was updated to add 39 pixels for the toolbar and 18 pixels for the status bar.
  Note:

  If the height isn’t set correctly, an unnecessary scrollbar can appear.
• The sn_mentions plugin uses the sn-editor skin. The sn-editor-themed skin is also supported.
• The contextmenu option includes only a link option by default. Add contextmenu:false to maintain the appearance from TinyMCE 4.
• The fontsize_formats option's values are separated by a space, as in fontsize_formats: '7pt 7.5pt 8pt 10pt 12pt 14pt 18pt 24pt 36pt'. Vertical bars (|) are no longer required.
• The PowerPaste plugin is in the plugins option list rather than the external plugins option list.

  Table 2.

  San Diego	Tokyo
  external_plugins: { powerpaste: '/scripts/tinymce4_4_3/plugins/powerpaste/plugin.min.js?sysparm_substitute=false' },	plugins: "lists code link powerpaste"

• The following additional languages are supported: French Canadian (fq), Hungarian (hu), Thai (th), and Turkish (tr). You can update the language list as follows to include these languages:

  var langs = 'cs,de,en,es,fi,fr,fq,he,hu,it,ja,ko,nl,pl,pt,ru,th,tr,zh,zt';

• CSS styles applied using the mce- namespace aren’t supported. Use the new CSS classes instead.
• Add the Lists plugin to the plugins option list to be able to use numbered or bulleted lists.