Walkthrough: Adding a custom button in Sitecore Rich Text Editor in Sitecore 8

I needed to add a custom button in Sitecore Rich Text Editor for a website that has many global variables used across many pages. All the variables are saved as dictionary items in Sitecore. The custom button would allow the editors to insert the key of a global variable as a token into the text. When pages having the tokens are rendered, the tokens will be replaced by the values of the dictionary items.

My idea was to create a SPEAK dialog page that would display all the keys of the global variables. The dialog pops up when the custom button on the Rich Text Editor is clicked.

Once a key is selected/clicked on the dialog, the dialog closes and the key is inserted into the text and highlighted as below.

Step 1

In Sitecore Rocks, find your default Rich Text profile. I use Rich Text Default. So I add a new _HTML Editor Button under /sitecore/system/Settings/Html Editor Profiles/Rich Text Default/Toolbar 1 in the core database and call it Insert Global Variable. Set the Click value of the Insert Global Variable Tokens item to a JavaScript method called “ShowTokens” that will be created later. This method handles when the button is clicked.

Step 2

All the click event handler of the Rich Text Editor’s buttons are defined in \Website\sitecore\shell\Controls\Rich Text Editor\RichText Commands.js. Instead of adding the “ShowTokens” method directly into this file, I create another JavaScript file called InsertGlobalVariableToken.js and place it in \Website\sitecore\shell\Controls\Rich Text Editor\InsertGlobalVariableToken.

The first function is used to load a CSS file that defines the button’s icon. The callbackFunction is used to insert the returned value, which is the key of the global variable. The first parameter of showExternalDialog specifies the item path of Insert Global Variable token SPEAK dialog.

We also need to insert a script node inside clientscripts/htmleditor in a patch config file.

Step 3

Now I am going to create a SPEAK dialog. I don’t want to elaborate how to create a SPEAK dialog here. The only thing special is that I create a custom SPEAK component that can list all the items in the specified dictionary folder and user can click one of them. The difficult part is how to send the selected key on the SPEAK dialog to the Rich Text Editor. I use the following piece of code in my custom SPEAK component’s page code. It can close the dialog and send the selected item’s text back to the Rich Text Editor.

Step 4

Last thing is to replace the token with the value of the dictionary when page is rendered. To achieve this, we create a new RenderField processor. This process will replace the highlighted token if the field is a rich text field and the page is not in page editor mode.

Add this process to a patch config file as well.

Hope this could help anyone who needs to do a similar task.