Sitecore RTE Custom Buttons to customize Rich Text fields & RTE Editor experience

Sitecore RTE got a reputation to be “hard to customize” and I can confirm the reputation gained across the years and Sitecore versions…

I have recently played a bit around with it and I am glad to share my experience and provide a few code snippets & tips that could make your life and Sitecore Authors experience better.

More specifically I will focus on a task to add a new Button to the RTE profile and run some Javascipt to customize the markup and add a CSS class to on an example UL list but you can easily customize the Javascript code to do something else… note that I have tried it and see it in action on Sitecore 10 but it is likely to work on 9 versions as well

1. Create the custom button

Steps to create the button are fairly simple since you can go to the core database and use one of the existing RTE profiles and duplicate an existing button

the easier way is to duplicate an existing button such as:

/sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Toolbar 2/Insert Unordered List

once you have an instance of a new button you need to define a new Icon and a new action on the “click event” property such as “ApplyCircleClass“

in case you want to have a “tooltip” for the new button on the mouse hover you have to tweak:

sitecore\shell\Controls\Rich Text Editor\Localization\RadEditor.Tools.resx

then add to the root element the following code:

<data name=”ApplyCircleClass” xml:space=”preserve”>
<value>Apply Circle Class or whatever…</value>
</data>

Connect the custom button

To connect the command you need to hook into the file RichText Commands.js under: sitecore\shell\Controls\Rich Text Editor folder

Telerik.Web.UI.Editor.CommandList["ApplyCircleClass"] = function (commandName, editor, tool) {
editor.setFocus();
jQuery(editor.getSelectedElement()).addClass("whatevercircle");
}

RTE CSS customisation

Once you got the command and the Javascript hooked in you may want to improve your editor experience by customizing the css specific to the RTE field, in order to do so you will have to have a new separate css file and hook into the settings

 <setting name="WebStylesheet" value="/css/rte.css" />

within the file rte.css you can define your custom css class relative only to the RTE box…

hopefully, these snippets and tips will help you with your RTE customization journey!