Custom Class Not Retained in Rich Text Editor (RTE) in Page Editor Mode (XMCloud)

We encountered an issue with the Rich Text Editor (RTE) in the Page Editor of Sitecore XM Cloud. When attempting to add a custom class attribute to an HTML element (e.g., <span>), the custom code is not retained upon saving and reopening the RTE. Instead, the code is converted into a <p> tag, stripping the custom class.

Example:

Input:

<span class="small-text">Sample Text</span>

After saving and reopening:

<p>Sample Text</p>

---

Investigation and Findings

• The issue occurs exclusively in Pages' RTE, which uses Quill.js as the editor.
• In the Content Editor's RTE, custom attributes like <span> and class are preserved as expected.
• This behavior is linked to Quill's optimization process, which standardizes and simplifies HTML during editing.

---

Recommended Resolution

To address this issue, Sitecore Support recommends switching to the latest CKEditor RTE, which resolves the problem and supports retaining custom attributes like classes.

---

Steps to Enable CKEditor in Sitecore XM Cloud

1. Update Configuration:

   • Replace Quill.js with CKEditor as the default Rich Text Editor for the Page Editor.

2. Validate Custom HTML:

   • Ensure that CKEditor preserves custom HTML elements and attributes in your environment.

3. Test and Deploy:

   • Test the new RTE configuration thoroughly in a staging environment before rolling it out to production.

For detailed instructions, refer to the official Sitecore documentation: Enabling CKEditor in Sitecore XM Cloud.

---

Workaround

If switching to CKEditor is not immediately feasible, you can manage custom HTML via the Content Editor RTE, where the issue does not occur.

---

Outcome

By implementing CKEditor, you can retain custom classes and resolve this limitation in the Page Editor's RTE, ensuring better flexibility and alignment with custom styling requirements.