Editing source code in the Rich Content Editor

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 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 Editing source code in the Rich Content Editor

    The Rich Content Editor enables ServiceNow customers to modify HTML and CSS source code directly within the canvas or for specific elements, allowing advanced customization of portal layouts and styles. This capability supports building layouts with HTML elements, adding custom CSS styling beyond the standard interface, and migrating content from other sources through copy-paste.

    Show full answer Show less

    Key Features

    • Portal Security: When applying code changes, the editor automatically sanitizes HTML to remove tags that could compromise your instance, helping maintain portal security.
    • Code Importance Identification: The editor highlights critical CSS fragments in red to prevent accidental deletion of CSS rules tied to portal themes or shared by multiple elements. If a CSS rule needed by key HTML elements (like Row, Cell, Canvas, Divider, Button, Link block, Tabs) is deleted, the editor reinstates it.
    • Removing Unnecessary Code: On saving, unused CSS rules are removed automatically. If a CSS rule is reinstated but needs removal, users can highlight it and use the Remove CSS button to override the editor's default behavior.
    • Copy-Paste Behavior: Different browsers may handle copy-paste differently. If Ctrl+V does not duplicate content as expected, use the duplicate icon in the component toolbar. If styling is lost on paste, clear styling first and then reapply it. Note that some scripts may be removed by the sanitizer, affecting pasted content appearance.

    Important Considerations

    • Adding custom HTML and CSS can break your portal design—proceed carefully.
    • The Undo button does not reliably revert code changes made in the editor, so manual backup of code is recommended.
    • Avoid defining CSS rules using generic HTML elements such as <div> or <p> because this can cause unintended styling effects across unrelated parts of the portal.
    • This editing feature must be enabled by an administrator through the Edit code property.

    Modify the HTML and CSS source code for all the elements in the canvas or for a specific element.

    Build the layout using HTML elements, directly edit the CSS for an element to add styling that isn't otherwise available in the canvas interface, or copy-paste code to migrate content from other sources.Add a border around a row and customize the header font

    Features and capabilities

    Ensure portal security
    When you click Apply in the Edit code window, the code editor removes HTML tags that could be used to compromise your instance. For more information, see HTML sanitizer.
    Identify important code
    The editing window highlights CSS fragments in red if they should not be deleted. This indicates either a setting that is part of the portal theme or that multiple elements use that code.
    Additionally, if you delete a CSS rule that is referenced by one of the following HTML elements, the code editor reinstates the CSS rule:
    • Row
    • Cell
    • Canvas
    • Divider
    • Button
    • Link block
    • Tabs
    Remove unnecessary code
    When you save your changes, the code editor removes any unused CSS rules.
    Conversely, if the code editor reinstates a CSS rule that you are trying to remove, highlight that block of CSS code and click the Remove CSS button to override the code editor.
    Figure 1. Example of using the Remove CSS button

    In the following video, the user tries to delete a CSS rule using the delete key, but the system reinstates the code. Next the user highlights the code and clicks Remove CSS, which successfully removes the code.

    User unsuccessfully tries to delete a CSS rule using the delete key, so they use the Remove CSS button, which removes the highlighted code
    Note:
    This feature is not available by default. An Admin must enable the Edit code property. See Properties installed with Content Publishing

    Important considerations

    • Adding custom HTML and CSS can break your design. Proceed with caution when using this feature. The Rich Content Editor does not track changes in the code editor, so the Undo button will not reliably revert the code changes.
    • We do not recommend using HTML elements (such as div or p) to define CSS rules, as that can have unintended consequences.
      Figure 2. Example of an unexpected outcome when using HTML element to define CSS rule

      In the following example, the user defines a CSS rule for the p element in a cell. However, in the page preview, the style rules apply to the p elements in all the text boxes, as well as in the footer.

      User defines a CSS rule using the HTML p element for a cell but the rule is applied throughout the page
    • Different browsers may exhibit varying copy/paste behaviours. If pressing Ctrl+V does not duplicate the content as expected, click the duplicate icon in the component toolbar.
    • If copy-pasted content does not retain its styling (such as font), and adjusting the settings does not help, clear the styling by clicking the “x" next to the styling field, then set the styling.Remove the custom styling by clicking the "x" next to the styling field
    • If pasted content appears differently saving, it likely due to some script tags being removed by the HTML sanitizer.