Editing source code in the Rich Content Editor

  • Release version: Xanadu
  • Updated August 1, 2024
  • 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 you to modify HTML and CSS for elements within the canvas. You can customize layouts, edit styles not available in the interface, and transfer content from other sources by copy-pasting code.

    Show full answer Show less

    Key Features

    • Ensure portal security: The code editor automatically removes potentially harmful HTML tags upon clicking Apply.
    • Identify important code: CSS fragments that should not be deleted are highlighted in red. The editor reinstates certain CSS rules if they are linked to specific HTML elements.
    • Remove unnecessary code: The editor cleans up unused CSS rules upon saving changes. If a CSS rule is reinstated that you wish to remove, highlight it and click the Remove CSS button.
    • Admin control: The Edit code property must be enabled by an Admin for this feature to be accessible.

    Important Considerations

    • Custom HTML and CSS can disrupt your design; proceed with caution.
    • The Rich Content Editor does not track changes, making the Undo function unreliable.
    • Avoid using HTML elements to define CSS rules to prevent unintended consequences.
    • Different browsers may behave inconsistently with copy-pasting. If issues arise, use the duplicate icon instead of Ctrl+V.
    • Styling may be lost when pasting content; clear styling fields if necessary. Be aware that the HTML sanitizer may remove script tags, affecting how pasted content appears.

    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.