Configuring system properties for TinyMCE HTML editor

  • Release version: Yokohama
  • Updated January 30, 2025
  • 3 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Configuring system properties for TinyMCE HTML editor

    This content details the system properties available to configure the behavior of the TinyMCE HTML editor within ServiceNow, specifically for the Yokohama release. These properties allow you to customize plugins, toolbar buttons, paste behavior, fonts, URL handling, context menus, and other editor functionalities to better fit your organization's needs.

    Show full answer Show less

    Key Features

    • Plugin Management: Properties glide.ui.html.editor.validplugins and glide.ui.html.editor.enabledplugins let you define which client-side plugins can be used and enabled in the editor. Caution is advised in removing plugins as it can cause side effects.
    • Toolbar Configuration: Use glide.ui.html.editor.toolbar.validbuttons to limit valid toolbar buttons and glide.ui.html.editor.toolbar to configure the actual toolbar layout. Only buttons listed as valid can be added.
    • Paste Behavior Controls: Two choice list properties manage how pasted content is filtered:
      • glide.ui.html.editor.paste.htmlimport controls filtering of pasted HTML (non-Word), offering options Clean, Merge, or Prompt.
      • glide.ui.html.editor.paste.wordimport controls filtering of pasted Microsoft Word content, with the same options.
    • Font Collections: glide.ui.html.editor.font.collection defines available fonts in the editor with a semicolon-separated list of font names and families.
    • Paste Filtering of Inline Elements: glide.ui.html.editor.paste.filteredinlineelements specifies inline HTML elements to be removed when using the Remove Formatting button after pasting from Word. Defaults to removing strong and b tags.
    • URL Handling: Properties glide.ui.html.editor.converturls (default false) and glide.ui.html.editor.relativeurls (default true) control whether URLs are converted and how relative URLs are handled in the editor content. Note that the base URL is tied to the instance’s origin and not configurable.
    • Extended Elements: glide.ui.html.editor.extendedvalidelements allows adding additional valid HTML elements beyond defaults.
    • Context Menu: glide.ui.html.editor.contextmenu configures which context menu options appear in the editor, overriding the browser’s native menu. Setting this to "false" disables the editor’s context menu, allowing native menus on right-click or Ctrl+right-click.
    • Toolbar Visibility on Focus: glide.ui.html.editor.toolbar.on.focus (not enabled by default) lets admins configure whether the toolbar hides when the editor loses focus.
    • Default Link Target: glide.ui.html.editor.defaultlinktarget sets the default target attribute for inserted links.

    Practical Application for ServiceNow Customers

    By configuring these system properties, administrators can tailor the TinyMCE HTML editor to meet organizational requirements for content editing, maintaining consistent formatting, enhancing user experience, and controlling available features. This ensures that content entered into HTML fields aligns with your company’s standards and reduces unwanted formatting issues from pasted content.

    Adjusting paste behavior properties helps maintain clean, valid HTML whether users are pasting from Word or other sources, while plugin and toolbar customizations streamline the editor interface for end users.

    URL handling and context menu settings provide additional control over how content behaves and how users interact with the editor, supporting compliance and usability goals.

    There are multiple system properties that are used to configure the behaviour of the HTML editor field type. Learn about the system properties available in the TinyMCE rich text editor.

    Table 1. HTML system properties in TinyMCE
    System properties for TinyMCE HTML editor Type Description
    glide.ui.html.editor.valid_plugins​ String
    Client-side HTML editor plugins that CAN BE added/or used (spaced delimited).
    Important:
    Removing plugins could cause undesirable side-effects.
    glide.ui.html.editor.enabled_plugins​ String

    Client-side HTML editor plugins that should be added (spaced delimited) in order for them to get enabled on the widget.

    Only plugins added in glide.ui.html.editor.valid_plugins​ can be added. Removing plugins could cause undesirable side-effects.
    glide.ui.html.editor.toolbar.valid_buttons​ String

    A valid (supported) button list for html fields. Use this to limit what buttons CAN BE added to the toolbar.
    glide.ui.html.editor.toolbar ​ String

    Configures the editing toolbar for HTML fields. This is a space-separated list without commas. Only valid buttons added in glide.ui.html.editor.toolbar.valid_buttons​​ can be added.
    glide.ui.html.editor.paste.html_import​ Choice list
    Paste formatting behavior for HTML. This setting controls how content from sources other than Microsoft Word is filtered when being pasted on html-editor. Note that this includes content copied from TinyMCE itself. The supported values are:
    • Clean: Preserves the structure of the content such as headings, tables, and lists but remove inline styles and classes. This results in simple content that uses the site's CSS stylesheet while retaining the semantic structure from the original document.
    • Merge: Preserves the inline formatting and structure of the original document. Invalid and proprietary styles, tags and attributes are still removed ensuring that the HTML is valid while more closely matching the original document formatting.
    • Prompt: Prompts the user to choose between the clean and merge options after attempting to paste HTML content.
    glide.ui.html.editor.paste.word_import​ Choice list
    Paste formatting behavior for word. This setting controls how content from Microsoft Word is filtered when being pasted on html-editor. Note that this includes content copied from TinyMCE itself. The supported values are:
    • Clean: Preserves the structure of the content such as headings, tables, and lists. Removes inline styles and classes. This results in simple content that uses the site’s CSS stylesheet while retaining the semantic structure of the original document.
    • Merge: Preserves the inline formatting and structure of the original document.Removes invalid and proprietary styles, tags and attributes.This ensures the HTML is valid while more closely matching the original document formatting.
    • Prompt: Prompts the user to choose between the clean and merge options after attempting to paste HTML content.
    glide.ui.html.editor.font.collection​ String

    User can select different font collection for Tiny MCE HTML editor:

    Example with one font:

    <pre>
Arial=arial,helvetica,sans-serif;
</pre>
    Note:
    More than one font value should be separated by a semi-colon with no space or line-break.

    Example with more than one font:

    <pre>
Andale Mono=andale mono,times;
Arial=arial,helvetica,sans-serif;
Arial Black=arial black,avant garde;
Book Antiqua=book antiqua,palatino;
Comic Sans MS=comic sans ms,sans-serif;
Courier New=courier new,courier;
Georgia=georgia,palatino;Helvetica=helvetica;
Impact=impact,chicago;Symbol=symbol;
Tahoma=tahoma,arial,helvetica,sans-serif;
Terminal=terminal,monaco;
Times New Roman=times new roman,times;
Trebuchet MS=trebuchet ms,geneva;
Verdana=verdana,geneva;
Webdings=webdings;
Wingdings=wingdings,zapf dingbats;
</pre>
    glide.ui.html.editor.paste.filtered_inline_elements​ String This setting allows the content to be filtered when pasted from MS Word to the TinyMCE V6 editor. This property takes input as a comma separated string of inline elements to be filtered by selecting the Remove formatting button on the paste prompt dialog. Default value is 'strong, b'.
    glide.ui.html.editor.convert_urls True | False This system property is used to set the convert_urls config of TinyMCE. Default: false.
    Note:
    This is related to the value of relative_urls which itself is set by glide.ui.html.editor.relative_urls.
    glide.ui.html.editor.extended_valid_elements String This system property is used to set the extended_valid_elements config of TinyMCE. Default: <Empty string>.
    glide.ui.html.editor.relative_urls True | False glide.ui.html.editor.relative_urls is used to set the relative_urls config of TinyMCE. Default: true.
    Note:
    This is related to the document_base_url which is not configurable in ServiceNow and is set to the window.location.origin (the base url of the instance).
    glide.ui.html.editor.contextmenu String

    Client-side HTML editor has its own context menu, overriding the browser's. Holding Ctrl while right-clicking bypasses the editor's context menu to show the native context menu.

    This property specifies which context menu options are available. Default value is "link image table" (without quotes). A value of "false" (without quotes) disables the editor's context menu.
    glide.ui.html.editor.toolbar.on.focus String

    True: User should be able to see hide toolbar behaviour if they move focus out.

    False: User should always see the toolbar regardless of the tab focus.

    Note:
    This property isn't added OOTB (out of the box) but can be added by an admin.
    glide.ui.html.editor.default_link_target This system property is used to set link_default_target.