Customize TinyMCE attributes

  • Release version: Washingtondc
  • Updated February 1, 2024
  • 4 minutes to read
  • Change TinyMCE toolbars and the default height of HTML fields to customize your journal field experience.

    Add or remove TinyMCE attributes from the default TinyMCE toolbar. The TinyMCE attributes are applied to TinyMCE toolbars in the platform and workspaces, or to specific plugins in a record or specific tables in a record. You can also apply an attribute to increase the height of HTML fields, enlarging the HTML field that agents work with.

    Change the TinyMCE default toolbar

    Set the toolbar items in your system properties to enable or disable throughout Workspace.

    Before you begin

    Role required: admin

    Procedure

    1. Navigate to All > System Properties > UI Properties.
    2. Update the Configures the editing toolbar for HTML fields(TinyMCE v5) (glide.ui.html.editor.v5.toolbar) property to add or remove buttons for the toolbar.
      Note:
      Use a vertical bar ("|") to add a section separator.
      Type Buttons
      Default buttons bold italic underline undo redo | fontselect fontsizeselect table | forecolor backcolor link unlink | image media code | alignleft aligncenter alignright | bullist numlist fullscreen
      Valid buttons newdocument, bold, italic, underline, strikethrough, alignleft, aligncenter, alignright, alignjustify, formatselect, fontselect, fontsizeselect, table, cut, copy, paste, pastetext, searchreplace, bullist, numlist, outdent, indent, blockquote, undo, redo, link, unlink, code, forecolor, backcolor, removeformat, hr, visualblocks, subscript, superscript, charmap, image, media, fullscreen, anchor, toc, codesample, ltr, rtl, emoticons, insertdatetime, nonbreaking, pagebreak, print, visualblocks, visualchars, cut, copy
    3. Select Save.

    Change the TinyMCE toolbar for a specific table

    Set the attributes in the TinyMCE dictionary to determine which TinyMCE attributes show in a specific table.

    Before you begin

    Role required: admin

    Procedure

    1. Navigate to a record with an HTML-type field that you want to change.
      For example, select an incident, problem, or knowledge record.
    2. Right-click the field label (for example, Article body) and select Configure Dictionary.
    3. In the Related Links section, select Advanced View.
    4. In the Attributes field, input editor.toolbar= followed by the desired toolbar buttons.
      For example, editor.toolbar=formatselect|bold italic underline strikethrough blockquote subscript superscript removeformat| bullist numlist outdent indent|undo redo|table hr|link unlink|image media code|visualblocks preview fullscreen.
      Note:
      • Include all the toolbar items that you want displayed, not just the toolbar items you want to add.
      • The configurations made to a field's Attribute field on the associated Dictionary record overrides the value of the System Property glide.ui.html.editor.v5.toolbar.
      • Multiple attributes, such as height, toolbar buttons, and toolbar plugins, can be combined within the Attributes field. For example, editor.height=300,editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticons hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor toc codesample visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontselect fontsizeselect | bold italic underline strikethrough forecolor backcolor pastetext removeformat | formatselect searchreplace undo redo | bullist numlist outdent indent alignleft aligncenter alignright | toc table link unlink image media codesample | code fullscreen.
    5. Select Update.

    Change TinyMCE plugins for a specific table

    Set the attributes in the TinyMCE dictionary to enable or disable plugins in a specific HTML field.

    Before you begin

    Role required: admin

    Procedure

    1. Navigate to a record with an HTML-type field that you want to change.
      For example, select an incident, problem, or knowledge record.
    2. Right-click the field label (for example, Article body) and select Configure Dictionary.
    3. In the Related Links section, select Advanced View.
    4. In the Attributes field, input editor.plugins= followed by the desired plugins, separated with a space.

      For example, editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticons hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor toc codesample visualblocks visualchars compat3x autolink align_listitems.

      Note:
      • Include all the toolbar items that you want displayed, not just the toolbar items you want to add.
      • The configurations made to a field's Attribute field on the associated Dictionary record overrides the value of the System Property glide.ui.html.editor.v5.toolbar.
      • Allowed plugins include: advlist align_listitems anchor autolink autoresize bbcode charmap codemirror codesample colorpicker directionality emoticons fullscreen hr image insertdatetime link lists media nonbreaking pagebreak preview print readonlynoborder searchreplace table textcolor toc visualblocks visualchars wordcount
      • Multiple attributes, such as height, toolbar buttons, and toolbar plugins, can be combined within the Attributes field. For example, editor.height=300,editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticons hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor toc codesample visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontselect fontsizeselect | bold italic underline strikethrough forecolor backcolor pastetext removeformat | formatselect searchreplace undo redo | bullist numlist outdent indent alignleft aligncenter alignright | toc table link unlink image media codesample | code fullscreen.
    5. Select Update.

    Change the default height of an HTML field

    Change the default height of a specific HTML field to expand the size of a journal field.

    Before you begin

    Role required: admin

    About this task

    HTML field height is configured per HTML field.

    Procedure

    1. Navigate to a record with an HTML-type field that you want to change.
      For example, select an incident, problem, or knowledge record.
    2. Right-click the field label (for example, Article body) and select Configure Dictionary.
    3. In the Related Links section, select Advanced View.
    4. In the Attributes field, enter editor.height=X, where X is the desired height.
      For example, editor.height=250
      Note:

      HTML fields can range from 72 to 2000. HTML fields are by default 64.

    5. Select Update.
    6. To configure the height of form fields dynamically as the text line increases rather than providing a specific height, complete the following steps:
      1. Navigate to All > System Properties > All Properties
      2. In the search bar, enter glide.ui.html.editor.v5.enabled_plugins and select the property.
      3. In the value field, add autoresize.
      4. Select Update.
        The autoresize plugin is active.

    Change the default font size of an HTML field

    Change the default font size of a specific HTML field to use a standard font size across forms.

    Before you begin

    Role required: admin

    About this task

    HTML font size is configured per HTML field.

    Procedure

    1. Navigate to a record with an HTML-type field that you want to change.
      For example, select an incident, problem, or knowledge record.
    2. Right-click the field label (for example, Article body) and select Configure Dictionary.
    3. Select the Default Value tab.
    4. In the Default value field, enter <p style="font-size:X;"></p>, where X is the default value.
      For example:
      • To set the font to large, enter <p style="font-size:large;"></p>
      • To set the size to 10, enter <p style="font-size:10pt;"></p>
    5. Select Update.