How to add a custom button into the Rich Text Editor

This is the fourth post in the series about Rich Text Editor (RTE) in Sitecore. The first post which was about the basics of setting up the RTE could be found here.

Sitecore is an incredibly good platform that provides a lot of functionality out of the box, but the greatest thing about Sitecore is that if there is something you’d like to customize, there’s always a way to do it. I’m going to walk through the process of adding a custom piece of functionality to Sitecore’s Rich Text Editor. There are a lot of reasons you would want to do this but for this example we’ll build a simple text insertion demo that you can expand upon.

Since changes will be applied to Sitecore interface (i.e. RichTextEditor is a part of Sitecore ContentEditor) we should work with Core database. So, the first step is to switch to the Core database.

Secondly, we need to add a new button inside already existed RichTextEditor Toolbar. So, there is a need to expand sitecore/system/Settings/HTML Editor Profiles/Rich Text Full/Toolbar1 and create a new item based on sitecore/templates/System/HTML Editor Profiles/HTML Editor Button. For the newly created button the following values could be used to fulfill the fields with:

  • Item Name = Insert Element
  • Display Name = Insert Element
  • Click = CustomInsertElement
  • Icon = /Components/Admin/Icons/16×16/insert_element_to_wysiwyg.png

Now, we need to handle this action (CustomInsertElement) in the javascript. By default, those actions are handled in \sitecore\shell\Controls\Rich Text Editor\RichText Commands.js but I don’t want to modify the default file to stay as updatable as possible with the future versions of sitecore. So, I have spent some time and found the solution. There is a need to create a separate js file (e.g. customInsertElement.js) and put the event handler inside it.

RadEditorCommandList["CustomInsertElement"] = function (commandName, editor, args) {
   scEditor = editor;
   editor.showExternalDialog(
   "/sitecore/shell/default.aspx?xmlcontrol=RichTextWithElements.SelectElement&la=" + scLanguage +   "&id=" + scItemID,
  null, //argument
  500,
  400,
  customInserElement, //callback
  null, // callback args
  "Select element",
  true, //modal
  Telerik.Web.UI.WindowBehaviors.Close, // behaviors
  false, //showStatusBar
  false //showTitleBar
  );
};

function customInserElement(sender, returnValue) {
   if (!returnValue) {
      return;
   }
   scEditor.pasteHtml("
<div style=\"-moz-user-select: none; border:black 1px dashed; width:200px; height:100px; float:right;\" unselectable=\"off\" contenteditable=\"false\" data-element-rendering=\"float:" + returnValue.floating + ";guid:" + returnValue.id + "\" >" + returnValue.text + "</div>
");
}

Now we need somehow to include our newly created javascript file into the Sitecore. It could be done very easy:

    • create custom config file
      /App_Config/Include/RichTextEditor.CustomButtons.config
    • put there the following code
<clientscripts>
   <htmleditor>
      <!-- list of script for rich text wysiwyg editor -->
      <script src="/Components/Admin/Scripts/customInsertElement.js" language="JavaScript"/>
   </htmleditor>
</clientscripts>

Enjoy!

Leave a comment