Apply Custom CSS Styles to Sitecore Rich Text Editor

The Sitecore Content Management System (CMS) is a simple and centralized content management system to manage the content. It provides a single source of truth for Content delivery because you can create content once and reuse across multiple channels. 

The Sitecore CMS also provides flexibility to the content creation team so that they can create content for target audiences to engage them.

Recently I had a discussion with Content Authoring Team and UX Team, and they raised the concern that it’s very difficult to verify the look & feel of styling provided by UX Team while creating the content.

I thought of having the Content Preview instance and had discussion with the team, and due to time/budget need to drop the idea, so I suggested to add the Cascading Style Sheets (CSS) to the Sitecore Rich Text Editor to provide matching style as per the HTML mock-up for components.

Regarding this I searched over the internet and found useful articles present in Credit / Reference section.

I have gone through the resources, and thought to give a try on following Technical Stack:
•    Sitecore Environment: Sitecore Experience Platform 10.2
•    Sitecore Implementation: Sitecore Headless Services (using ReactJS)  

I followed below steps to add the custom cascading style sheets (CSS) to the Sitecore rich text editor:

Things to consider:

The Sitecore Default Cascading Style Sheets (CSS) file present at <Web Root Folder>\default.css

You don’t need to do update the ToolsFile.xml file located at <Web Root Folder>\sitecore\shell\Controls\Rich Text Editor\ folder to add css class entries in <classes> node

You don’t need to update source property of rich text editor field

The Sitecore patch configuration file, if you are planning to deploy new Cascading Style Sheets (CSS) file instead of <Web Root Folder>\default.css then it should deploy only to Sitecore Content Management Role (at /App_Config/Include/zzz/zz.Sitecore.Custom.RTE-Styles.config ):

If you want to include new Cascading Style Sheets (CSS) file into Sitecore Default Cascading Style Sheets (CSS) file, then you can

<!-- Including new css file into <Web Root Folder>\default.css file -->
  @import "/assets/css/Sitecore.Custom.RTE-Styles.css";
  

Please keep in mind that it will first load the new file css classes then default.css file css classes, so changes of default.css file would be applied.

If you are adding any new style at Sitecore CMS CSS file then same name CSS class for different devices support needs to be added into the Front-end web app CSS file:

@media only screen and (max-width: 1279px) {
    h1.CT {
      /* H1 */
      color: #ffffff;
      font-family: "Arial";
      font-style: normal;
      font-weight: 700;
      font-size: 20px;
      line-height: 20px;
    }
    
  }
  
  @media only screen and (min-width: 1280px) {
    h1.CT {
      /* H1 */
      color: #ffffff;
      color: #ffffff;
      font-family: "Arial";
      font-style: normal;
      font-weight: 700;
      font-size: 30px;
      line-height: 50px;
    }
  }
  

You can’t verify styles for different devices in Sitecore RTE as per styles mentioned in previous steps so it can have changes like this:

h1.CT {
      /* H1 */
      color: #ffffff;
      font-family: "Arial";
      font-style: normal;
      font-weight: 700;
      font-size: 20px;
      line-height: 20px;
    }
  

To verify custom styles in RTE your RTE profile should have Style option enabled

If you update Front-end web app CSS file in terms of styling, then you have to apply same changes to Sitecore CMS CSS file so that Content Authoring team have updated changes for styling

During Sitecore upgrade process your changes would be overridden so you have to append the details from new /default.css file into to your custom Sitecore CMS CSS file and deploy to location as per config file present at App_Config/Include/zzz/zz.Sitecore.Custom.RTE-Styles.config

After deployment of custom styling changes to Sitecore Content Management role and go to any RTE profile where Styles enabled then you can check custom CSS styles: 

Credit/References:

Separated .css file for Sitecore Rich Text Editor - Stack Overflow	User Specific or Multi Site Specific CSS styles in Sitecore Rich Text Editor | jammykam (wordpress.com)	Apply CSS classes in Rich Text Editor | Learn Sitecore Basics. (wordpress.com)
Adding custom CSS Class to Sitecore Rich Text Editor – The Relentless FrontEnd – Aackose Lal's Blog

Pingback:

sitecore rich text editor add css class	sitecore rich text editor css class	sitecore custom rich text editor
add css classes to sitecore rich text editor	sitecore customize rich text editor	sitecore customize rich text editor
adding custom css class to sitecore rich text editor	sitecore rich text editor custom button	rich text editor sitecore
rich text sitecore	sitecore rich text editor full	sitecore rich text editor javascript
sitecore kafka	Sitecore Content Migration Using Sitecore Express Migration Tool	Sitecore xDB Migration Using Sitecore xDB Data Migration Tool
How to use Sitecore SwitchOnRebuildSolrSearchIndex on Solr slave Indexes which are replicated from Master Index
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	sitecore xconnect data analytics	Speed Up Sitecore Upgrade with PackageReference
sitecore xconnect data analyst	Sitecore Version 10 - Sitecore Upgrade Process	sitecore xconnect data architecture
sitecore rich text editor profiles	sitecore rich text editor	sitecore rich text editor snippets
sitecore html editor profiles	rich text editor profiles sitecore	custom rich text editor sitecore
sitecore rich text editor configuration	sitecore rich text editor javascript	sitecore rich text editor full
rich text editor features	sitecore rich text editor button	best rich text editor for website
sitecore rich text editor customization	sitecore rich text editor custom css	sitecore rich text editor css
sitecore change rich text editor profile	sitecore rich text editor links	sitecore rich text editor location
sitecore rich text editor options	sitecore rich text editor p tag	sitecore set rich text editor
sitecore rich text editor script	sitecore rich text editor table	Apply Custom CSS Styles to Sitecore Rich Text Editor
Start using Sitecore GraphQL API	Sitecore Helix Recommendation and Conventions - Helix 2.0	What’s new in Sitecore 10
Analysis for Sitecore Experience Accelerator (SXA) based website implementation	Secure Sitecore JSS Site	Sitecore Experience Accelerator (SXA)
Sitecore Graphql tutorial	Sitecore Performance Tuning	Sitecore GraphQl Examples
What is SXA Page Design?	Sitecore Installation and Upgrade Guides	Sitecore Upgrade Services