Sitecore XM Cloud Pages: CKEditor for Rich Text Editing

Sitecore Pages: A Modern Editing Experience in XM Cloud

Sitecore Pages, introduced with XM Cloud, represents a significant leap forward in the content editing experience for the Sitecore platform. It's designed to cater to both content authors and developers, fostering a more collaborative and efficient workflow.

Key Features and Benefits

• User-Friendly Drag-and-Drop Interface: This is a cornerstone of Sitecore Pages. It empowers content authors to visually construct and modify page layouts by simply dragging and dropping components onto the canvas. This significantly reduces the need for technical intervention for common layout changes.
• Rich Text Component Integration: The inclusion of robust rich text editing capabilities directly within the drag-and-drop interface means authors can create and format content with ease, ensuring consistency and visual appeal without leaving the editing environment.
• Enhanced Content Creation and Editing Experience:
  • Easier: The intuitive visual interface lowers the barrier to entry for new authors and simplifies complex tasks for experienced ones.
  • More Efficient: Authors can work faster by directly manipulating the page, reducing back-and-forth with developers for simple adjustments. This accelerates time-to-market for new content.
  • Faster Loading: Built with modern headless principles and optimized for performance, Sitecore Pages (and the content it manages) is designed to load much more quickly, improving the overall user experience for both authors and site visitors.
  • More Consistent: By providing a structured yet flexible component-based approach, Sitecore Pages helps ensure brand consistency across different pages and content types, as developers define the reusable components and authors use them within predefined guidelines.
• Developer Empowerment: While focusing on author experience, Sitecore Pages also benefits developers by providing a clear framework for building reusable components, managing data models, and integrating with the headless architecture of XM Cloud. This separation of concerns allows developers to focus on building robust functionalities while authors focus on content.

Rich Text Editor (RTE): The Power of Visual Content Creation

A Rich Text Editor (RTE), often interchangeably referred to as a WYSIWYG (What You See Is What You Get) editor, is a fundamental component in content management systems, web applications, and various digital platforms. Its primary purpose is to empower users to input, edit, and format text with a wide array of stylistic and structural options beyond simple plain text.

The Core Principle of WYSIWYG:

The "What You See Is What You Get" philosophy is central to the RTE. It means that as content authors are creating and modifying their content within the editor interface, the visual representation they see closely mirrors how that content will ultimately appear on the live website or published output. This eliminates guesswork and streamlines the content creation process.

Common Features of an RTE

• Font Styling:
  • Bold, Italic, Underline, Strikethrough: Basic text emphasis.
  • Text Color, Background Color: Visual customization for emphasis or branding.
  • Different Heading Sizes (e.g., H1, H2, H3): Crucial for semantic structure, SEO, and visual hierarchy.
• Paragraph Formatting:
  • Alignment (Left, Right, Center, Justify): Controls text flow and visual presentation.
  • Bullet List, Number List: Essential for organizing information clearly.
  • Increase/Decrease Indent: For structuring outlines and sub-sections.
• Inserting Elements:
  • Images: Embedding visual media directly into the content. Often includes options for resizing, alt text, and alignment.
  • Videos: Embedding video content from platforms like YouTube or Vimeo.
  • Tables: For presenting tabular data in an organized manner.
  • Horizontal Lines (HR Tag): For visual separation within content.
  • Links (Hyperlinks): Connecting to other pages, external websites, or downloadable files.
• Editing Tools (Standard Productivity Features):
  • Cut, Copy, Paste: Standard clipboard operations.
  • Undo/Redo: For correcting mistakes and experimenting with changes.
  • Find and Replace: Efficiently locating and modifying specific text strings.
• Open Source Code Editor (HTML View):
  • This is a critical feature for advanced users. It allows content authors to switch from the visual WYSIWYG design view to a raw HTML code view. This provides direct control over the underlying markup, useful for:
    • Troubleshooting formatting issues.
    • Inserting custom HTML snippets.
    • Ensuring specific semantic tags are used.

Sitecore's Transition to CKEditor in XM Cloud: A Strategic Upgrade

On May 7, 2025, Sitecore officially announced the deprecation of its Legacy Text Editor, with the change taking full effect on May 8, 2025. This pivotal move established CKEditor as the new default Rich Text Editor (RTE) for Sitecore XM Cloud.

Key Drivers for the Change

The primary motivation behind this shift was a commitment to significantly enhance the rich text editing experience within XM Cloud Pages. This involved:

• Addressing Legacy Editor Shortcomings: The previous editor suffered from several issues, notably:
  • Poor User Experience (UX): It likely lacked the intuitive and seamless editing flow that modern content authors expect.
  • Limited Functionality: It may have been missing advanced formatting options, robust media embedding capabilities, or essential collaboration features.
• Introducing New Features: CKEditor brings a suite of modern functionalities designed to empower authors and streamline content creation.

The Overarching Goal: Meeting Evolving Web Content Demands

In essence, Sitecore's adoption of CKEditor is a direct response to the dynamic and increasing demands of contemporary web content creation. It represents a strategic move towards providing:

• More Robust Solutions: A powerful and reliable editor that can handle complex content structures and integrations.
• User-Friendly Interfaces: An intuitive and efficient experience that empowers content authors to create high-quality content without technical hurdles.
• Developer-Friendly Environments: A modern, extensible editor that integrates seamlessly with development workflows and allows for easy customization and future enhancements.

This transition underscores Sitecore's dedication to continuously improving its platform, ensuring XM Cloud remains a cutting-edge solution for digital experience management by offering best-in-class tools for content creation and management.

Legacy Rich Text Editor vs. CKEditor: A Feature Comparison in Sitecore XM Cloud

The evolution of the Rich Text Editor (RTE) in Sitecore XM Cloud marks a significant improvement in the content authoring experience.

Legacy Rich Text Editor

• Default in Early XM Cloud: This editor was the standard from the initial phases of XM Cloud's release.
• Limited Basic Functionality: It provided only fundamental text editing capabilities. This often forced content authors to switch from the visual "Page Builder" interface to the "Content Editor" (a more back-end focused view) to access more advanced or comprehensive rich text editing features, disrupting their workflow.

CKEditor (The Modern Replacement)

• Introduction Date: Sitecore introduced CKEditor in February 2024, signaling its intent to replace the legacy editor.
• Enhanced Functionality & Features: CKEditor brings a wealth of new capabilities that were either missing or limited in the legacy version, including:
  • Table Creation: Empowering authors to organize data effectively within the content.
  • Horizontal Lines: For clear visual separation within text.
  • Video Embedding: Direct insertion of video content, crucial for rich media experiences.
  • Improved Text Alignment: More precise control over text layout.
  • Find and Replace: A critical productivity tool for managing content within the editor.
  • Enhanced List Options: More flexibility for ordered and unordered lists (e.g., different numbering styles, bullet types).
  • Advanced Image Styling: Greater control over how images appear, including sizing, alignment, and potentially captions or borders.
  • Text and Background Color Options: Extensive visual customization for emphasis and branding consistency.
  • Source Code Editor for Embeds: Authors can now seamlessly paste raw HTML or embed codes (e.g., for YouTube videos, Google maps, social media posts, custom widgets) directly into the content via the HTML source view.
• Improved User Experience & Interface:
  • Toolbar Placement: A significant UX improvement is the change in the toolbar's location. It no longer appears on the right side of the screen but now docks at the top of the text field, similar to the familiar layout found in the traditional Sitecore "Content Editor" and most modern word processors, leading to a more intuitive and consistent experience.

Overall Impact:

These comprehensive changes delivered by CKEditor modernize the rich text editing features within Sitecore XM Cloud Pages and significantly improve the overall User Experience for content authors, making content creation more efficient, flexible, and visually aligned with the final output.

Required Actions: Ensuring Your Rich Text Editor is Up-to-Date

This is a crucial clarification and a very important note for users already on later JSS versions and with CKEditor enabled. It essentially states:

No Action Required for Already Enabled CKEditor on JSS 21.5.2+

If your Sitecore XM Cloud solution is currently running on JSS 21.5.2 or a later version, and you have previously enabled the new CKEditor (e.g., via the environment variable PAGES_ENABLE_NEW_RTE_EDITOR set to True), then no further configuration or action is necessary.

For these environments where CKEditor was already activated, no changes in behavior are expected. The editor will continue to function as it has been, benefiting from its enhanced features and improved user experience.

Why this is important

• Avoids Redundancy: Prevents users from attempting to re-enable something that is already active.
• Ensures Stability: Reassures users that existing, working configurations will not be disrupted by recent announcements or platform updates regarding the RTE.
• Clear Guidance: Provides a definitive statement for a specific set of users, simplifying their upgrade or maintenance considerations.

Unlocking the New RTE Editor: Environment Variables & Docker

Enabling the New RTE Editor via Environment Variables in XM Cloud Portal

This method is applicable for Sitecore XM Cloud deployments, where you manage your environments through the XM Cloud Portal.

Steps:

1. Login to the XM Cloud Portal: Access your Sitecore XM Cloud dashboard.
2. Navigate to XM Cloud Deploy: On the left-hand navigation pane, select "Deploy" to go to your deployment management section.
3. Go to Projects: Within XM Cloud Deploy, click on "Projects" to view your deployed Sitecore projects.
4. Select Your Project: Click on the specific project for which you want to enable the new RTE.
5. Go to Variables: Within your project's settings, find and click on the "Variables" tab.

6. Click "Create variable" button: This will open a new window or form for defining a new environment variable.

   

7. Enter Variable Details:

   • Name: Enter PAGES_ENABLE_NEW_RTE_EDITOR (This is the specific flag Sitecore uses to activate the new RTE).
   • Value: Enter True (This sets the flag to enable the editor).
   • Target: Select CM (This specifies that the variable applies to the Content Management instance, where the RTE is used).
8. Click "Save" button: Confirm the creation of the new variable.

.

9. Restart Environment: On the right side of the screen, locate the "Options" dropdown button and select "Restart environment." This crucial step ensures the new environment variable is picked up by your CM instance, activating the new RTE.

Enabling RTE Editor in Docker (Local Development) via docker-compose.override.yml

This method is ideal for local Sitecore XM or XM Cloud deployments running in Docker, allowing you to customize your environment without modifying core configuration files.

Steps:

1. Locate your local Sitecore Docker files: Navigate to the root directory of your Sitecore Docker project (where your docker-compose.yml and other Docker-related files are located).
2. Navigate to (or Create) docker-compose.override.yml:
   • Look for a file named docker-compose.override.yml in that directory.
   • If it doesn't exist, you can create a new file with that name.

3. Add PAGES_ENABLE_NEW_RTE_EDITOR to the CM service: Open docker-compose.override.yml (or create it) and add the following configuration.

   

4. Rebuild/Restart Your Docker Containers: After saving the docker-compose.override.yml file, you need to restart your Docker environment for the changes to take effect. Navigate to your project's root directory in your terminal and run:

Bash docker-compose up -d --build

The --build flag ensures that if any service dependencies or configurations require a rebuild (though typically not for just environment variables), it will happen. A simpler docker-compose restart cm might also work if no other changes were made, but up -d is generally safer for picking up all config changes.

Beyond Activation: Maximizing Content Editing with CKEditor in Sitecore XM Cloud Pages

The final output, once the new CKEditor-based Rich Text Editor is successfully enabled (whether through environment variables in the XM Cloud Portal for deployed environments or via docker-compose.override.yml for local Docker setups), will be a significantly modernized and enhanced editing experience within Sitecore XM Cloud Pages.

References:

The legacy rich text editor in Pages will be deprecated on May 8th, 2025

Improved rich text editor in XM Cloud pages

Add rich text to a page

Related Links:

What is Sitecore Pages

Exploring the Sitecore Pages Interface in XM Cloud

New to Sitecore Pages? Commonly Used Operations on a Web Page

How to Update the Rich Text Editor in Sitecore Content and Experience Editor