Reading time: 7 min read
Sitecore XM Cloud Pages: CKEditor for Rich Text Editing
Learn how to configure the new CKEditor Rich Text Editor (RTE) with Environment Variables and Docker.
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.
- 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:
Sitecore's Transition to CKEditor in XM Cloud: A Strategic Upgrade
Introduction: The new rich text editor, powered by CKEditor, was introduced in Sitecore XM Cloud Pages on February 12, 2024.
Deprecation of Legacy Editor: Sitecore officially deprecated the legacy rich text editor on May 8, 2025, making the newer CKEditor the default.
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)
- 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 Action: Upgrading Your JSS Project for Enhanced Rich Text Editing (CKEditor)
If your Sitecore JSS project is currently running on a version older than 21.5.2, you must upgrade to at least JSS 21.5.2 (or preferably the latest version) to leverage the new CKEditor experience for Rich Text fields.
Related Links:
Exploring the Sitecore Pages Interface in XM Cloud
New to Sitecore Pages? Commonly Used Operations on a Web PageHow to Add Code Snippets in Sitecore XM Cloud’s Rich Text Editor
How to Update the Rich Text Editor in Sitecore Content and Experience Editor