Control the HTML wrapping for RTE output

In the Page builder, the rich text editor (RTE) relies on a dedicated content stylesheet to ensure that edited and published content is rendered correctly. Some features include extra CSS to style the HTML they generate. For example:

  • Images and image captions

  • Block quotes

  • Lists and list spacing

  • Tables

  • Media presentation and alignment

Without these content styles:

  • Image captions and block quotes might lose their expected styling.

  • Typography, spacing, and inline feature styles may not match what authors see in the editor.

  • Preview and published output can differ from the editing experience.

To keep these styles isolated from the rest of the page and ensure consistent rendering, the generated HTML is enclosed in a wrapper using the ck-content class to apply essential formatting and rendering rules.

If you wish disable the automatic wrapper for a specific site via site-specific editor profile, you must:

  • Either ensure that your own HTML markup around the RTE output uses the ck-content class somewhere in the ancestor chain.

  • Or provide equivalent CSS in your site’s own stylesheet that replaces everything normally provided under .ck-content in content-styles.css. When implementing equivalent styling yourself, you must verify that all CKEditor features you use (images, block quotes, tables, etc.) render correctly in both preview and on the published site.

Understanding the default wrapper

The Page builder loads content styles from the following stylesheet: https://edge-platform.sitecorecloud.io/v1/files//styles/content-styles.css?sitecoreContextId=<ContextId>

This stylesheet contains the Editor content styles, scoped with the .ck-content class, as recommended by CKEditor:

  • All rules are prefixed with .ck-content to avoid leaking into the rest of the application.

  • The same stylesheet is used for both the editor and the published content, so what authors see in matches the final site as long as the wrapper is present.

To ensure the styles are applied, the HTML rendered from the RTE is wrapped in a container that has the ck-content class:

RequestResponse
<div class="ck-content">
  <!-- RTE output -->
</div>

This wrapper:

  • Scopes the content styles so they apply only to the RTE output.

  • Ensures correct rendering of features such as images, captions, block quotes, tables, and typography.

  • Prevents CKEditor styles from affecting the rest of your page.

Use a parent ck-content wrapper

To avoid the ck.content wrapper while still using the built‑in content styles, you can apply the ck-content class on a parent element of the RTE output. When a parent element already has the ck-content class, the Page builder will not add an additional wrapper around the field value. This lets you control the markup structure (for example, at a component or variant level) while still benefiting from the shared content-styles.css rules that are scoped to .ck-content.

Example of a custom parent wrapper (with no extra wrapper added)

Component markup:

RequestResponse
<div class="my-rich-text ck-content">
  <!-- RTE field output is rendered here without an additional ck-content wrapper -->
  {{ rteFieldValue }}
</div>

Effective output on the published site:

RequestResponse
<div class="my-rich-text ck-content">
  <p>Some rich text with images, lists, etc.</p>
</div>

If you do not provide a parent element with ck-content, the Page builder automatically adds the wrapper by default:

RequestResponse
<div class="my-rich-text">
  <div class="ck-content">
    <p>Some rich text with images, lists, etc.</p>
  </div>
</div>

Either methods ensure that content styles are applied correctly; the main difference is whether you or the Page builder controls the wrapper element.

Disable the wrapper for a site

If you decide to bypass the ck-content wrapper but still rely on CKEditor-provided styles, you must copy and adapt the Editor content rules from content-styles.css into your own selectors. If you do not do this, features like image captions and block quotes are likely to appear unstyled or inconsistent between the editor and the published site.

To prevent the RTE from adding the extra <div class="ck-content">...</div> wrapper, create a RTE toolbar profile where disableContentWrap is set to true. For example:

RequestResponse
{
  "toolbar": { "items": ["bold", "italic"] },
  "disableContentWrap": true
}

When disableContentWrap is set to true, the RTE will output the content without the automatic ck-content wrapper. This means that all content styling rules will be inherited from your site, rather than what was configured in the RTE, which can result in broken or inconsistent spacing, typography, lists, tables, or media rendering.

Do you have some feedback for us?

If you have suggestions for improving this article,