Editing source code in the Rich Content Editor

  • Release version: Washingtondc
  • Updated February 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 source code for elements within the Employee Center. This enables you to build layouts and apply custom styles that may not be available through the standard interface. You can also migrate content from other sources by copy-pasting code.

    Show full answer Show less

    Key Features

    • Portal Security: The editor sanitizes HTML to prevent security risks by removing potentially harmful tags upon applying changes.
    • Code Highlighting: CSS fragments that should not be deleted are highlighted in red, indicating importance for portal themes and shared elements.
    • Automatic Cleanup: Unused CSS rules are removed upon saving. If a deleted CSS rule is still in use, the code editor automatically reinstates it.
    • Remove CSS Functionality: If a CSS rule is reinstated that you want to remove, you can highlight it and use the Remove CSS button to override the editor's actions.

    Key Considerations

    • Custom HTML and CSS can disrupt your design; caution is advised when using these features.
    • The Rich Content Editor does not track changes, making the Undo function unreliable.
    • Avoid using HTML elements to define CSS rules to prevent unintended styling issues across the application.
    • For copy-pasting content, use the duplicate icon if standard methods do not work, and be aware of styling loss due to the HTML sanitizer.

    Note: The Edit code property must be enabled by an Admin for access to these features.

    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.