When providing texts that marketers are expected to maintain after the site is deployed you must never put in any markup or classes that cannot be maintained using the WYSIWYG editor. If editors need to put classes on text elements (that you need to style in a specific way in your theme) you must add these classes to the Sitecore Rich Text Editor. In this way, they are available in the drop-down menu. Editors can then style the content without having to switch to the HTML view.
In OOTB Richtext, content author does not have any provision to apply or update css to specific html element.
In this component, we have given a provision of adding css classes directly to UL tag, LI tag and anchor tag within the Richtext editor. If we would like to extent this feature to any other html tag, we can just update the “RichText Commands.js”.
We have created a Sitecore Package so that Content Author can get the ability to access or select multiple css classes within Rich Text Editor. “Fully Editable RichText Field on Design View-1.zip” package is need to installed and this package support on Sitecore 9.3 Version.
After Installing above Sitecore Package, wherever we are using RichText as control type in our template, will have to provide below path in its DataSource feild.
/sitecore/system/Settings/Html Editor Profiles/Rich Text Custom XA
After updating the datasource path of Richtext control field, Content Author can able to access or select multiple css classes within Rich Text Editor.
NOTE: As current package supports on Sitecore 9.3. We can download the below source code and update the “Telerik.Web.UI” based on the Sitecore version we are using. Will have to update the reference of “Telerik.Web.UI” on RichText Project and build the project and replacing the dll can help us utilize this feature on other Sitecore version also.