Editing source code in the Rich Content Editor

  • Release version: Australia
  • Updated March 12, 2026
  • 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 allows users to modify HTML and CSS source code for elements on the canvas, enabling the customization of layouts and styling that may not be achievable through the standard interface. Users can also transfer content from other sources by copying and pasting code.

    Show full answer Show less

    Key Features

    • Portal Security: The editor ensures the security of your portal by automatically removing potentially harmful HTML tags upon clicking Apply.
    • Code Identification: CSS fragments that are essential to the portal theme are highlighted in red, preventing accidental deletion.
    • Code Management: Unused CSS rules are removed upon saving changes. If a rule is reinstated unintentionally, users can override this by highlighting the code and using the Remove CSS button.

    Important Considerations

    • Custom HTML and CSS can disrupt design integrity; exercise caution when making changes.
    • The Rich Content Editor does not track changes, making the Undo button unreliable for reverting code alterations.
    • Avoid using HTML elements to define CSS rules, as this can lead to unexpected styling effects across the page.
    • For copy-pasting issues, if standard methods do not work, use the duplicate icon in the toolbar or clear and reset styling as needed.

    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.