Copy and Paste in the Rich Content Editor

  • Release version: Yokohama
  • Updated April 25, 2025
  • 3 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 Copy and Paste in the Rich Content Editor

    This document explains how to use the copy and paste functionality within the Rich Content Editor as of the Yokohama release (updated April 25, 2025). It covers how to copy and paste HTML and CSS source code for canvas elements, directly edit CSS styling, and migrate content from other sources while maintaining or adjusting formatting.

    Show full answer Show less

    Key Features

    • Copy and Paste HTML/CSS: Allows pasting of HTML and CSS code to add or modify content styling on the canvas.
    • Background-color Handling: From the May 2025 release, pasted background colors will not display in the right-hand panel unless converted to background-image styling, which supports layering of background colors, gradients, and images.
    • Color Opacity: New color opacity functionality is available but only supported via hex color codes (with 8-character syntax #rrggbbaa) added through the edit code feature; the standard color input only accepts 6-character hex codes.
    • Edit Code Feature: Enables converting rgba() colors to hex codes for accurate rendering and styling adjustments.
    • Component Toolbar: Copying components on the canvas requires using the component toolbar, as standard ctrl+v does not duplicate components as expected.

    Limitations and Best Practices

    • Browser behaviors vary; some paste functions work in Chrome but not in Firefox or Safari.
    • Pasting highlighted text within text components is generally unsupported across browsers.
    • Copying large content chunks may cause display or behavior issues; copying smaller sections is recommended.
    • Some styles, such as font names, may fail to apply; clearing existing styling before pasting can help.
    • Content pasted with script tags may be sanitized and removed upon saving and reloading.
    • Hex color codes must begin with a hash (#) and can include opacity when using 8-character syntax via the edit code modal.
    • When no component is selected, pasted content appears at the end of the canvas; if a component is selected, content pastes underneath it or within nested components if applicable.
    • Selecting pink areas on the canvas will deselect components; green areas maintain selection.

    Practical Application for ServiceNow Customers

    ServiceNow customers using the Rich Content Editor can efficiently migrate and style content by copying and pasting HTML/CSS code. To ensure consistent visual presentation, convert background colors to background-image styles and use hex color codes with opacity handled via the edit code feature. Understanding the paste behavior depending on component selection helps manage content placement accurately. Awareness of browser limitations and best practices like pasting smaller chunks and clearing styles can prevent common issues during content editing. This guidance enables customers to maintain robust styling and content structure in their ServiceNow environment.

    Copy and paste HTML and CSS source code for elements in the canvas.

    Directly edit the CSS for an element to add styling, or copy-paste code to migrate content from other sources.

    Important:
    For the May 2025 release, if any pasted content has a background-color, the right-hand panel will not display the color unless it is formatted with background-image styling. The background acts as layers to add background-color, gradient, and image to your content. The edit code feature can be used to adjust the pasted styling from background-color to the corresponding value for background-image CSS, if you want the color to be displayed on the right-hand panel.
    Tip:
    Color opacity functionality is a new feature and isn't supported in any prior release.

    Limitations

    • Browsers might display different copy-paste behaviors due to browser functional differences.

    • Copying a component on canvas doesn’t duplicate as expected on ctrl+v, so you must access the component toolbar.

    Figure 1. Component Toolbar
    Provides additional selections from the Component Toolbar
    Note:
    You can also add color opacity to the canvas. However, one of the limitations is that copy/paste won't transfer all styling when the colors are formatted in rgba()instead of rgb or hex.

    • Pasting highlighted text isn’t supported within text components, so behaviors that work in Chrome might not work in Firefox or Safari.

    • We recommend adding colors of pasted content in hex code format (#rrggbbaa to add opacity, or you can use #rrggbb).

      • The hash-tag (#) is required.
      • Hex codes start with a pound sign or hash-tag (#) followed by 6 letters if there is no color opacity, or 8 letters if there is color opacity.
      • The 8-character syntax only works if it is added to the element CSS through the edit-code feature. The color input field on the right-hand panel only accepts 6-character syntax.
    • You can also open the edit code modal to adjust the rgba() colors of the component to hex code to reflect the styling.

    If certain styling isn’t applied (for example Font name) or adjusting any of the settings for the pasted content doesn’t work, try to clear the styling first by selecting the “x" next to Font name.

    Figure 2. Font name
    Allows you to adjust font settings
    • If your pasted content doesn’t display as expected or behaves incorrectly, try to copy a smaller chunk instead of a big section at once.
    • • If your pasted content is displayed differently before and after saving and reloading, it might be due to some script tags removed by the HTML sanitizer.

    Deselected Areas

    • If you select the Pink areas, it deselects any component that is selected on the canvas.

    • If you select the Green areas, it keeps the current component selected.

    Figure 3. Rich Content Editor Canvas
    Allows you to determine action based on color background selected
    Note:
    Cutting and pasting highlighted text isn’t supported within text components and experiences across browsers might behave differently. Behaviors that work in Chrome might not work in Firefox or Safari.

    Additional Rich Content Actions and Behaviors

    The ability to add color opacity to the canvas is a useful function available to you. The only limitation is that the copy and paste function styling is different when the colors are formatted in rgba() instead of rgb, or hex.
    • Add colors in hex code format (#rrggbbaa to add opacity or just #rrggbb).
    • Open the edit code modal to adjust the rgba() colors of the component to hex code to reflect the styling.
    Note:
    Content is pasted at the end of the canvas when no component is selected.
    • If a component is selected, content pastes underneath it.
    • If a component is being edited, the following paste behavior occurs:
      • If the source is plain text, the content pastes into the current component, and matches the pasted text to the destination styling.
      • If the source is formatted, it’s appended under the most current component.
      • If the component enables nested components (for example Tab, Accordion, or Row), then content is appended within the parent container.
    • If components are deselected when selected out of the canvas, it enables paste with source formatting.

    For more information on editing source code, see Editing source code in the Rich Content Editor