Adding custom drop down list to rich text editor in Sitecore

tl;dr Adding custom drop lists in RTE is already built in to Sitecore

A question on StackOverflow asking if it was possible to add custom dropdown lists similar to Symbols caught my interest. I’ve looked at the RTE implementation before but not in any depth since the Telerik RadEditor control was updated in Sitecore 6.5. I’d also added some implementation details to a previous question.

Whilst looking through SetupToolbar in Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration it turns out that support for custom drop lists is built in to Sitecore already so it is fairly easy to add.

Switch to the core database and add a new button in the toolbar of the RTE profile you are using, e.g. /sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Toolbar 1

Make sure the template of the button is of type Html Editor Custom Drop Down or Html Editor Custom Drop Down Button, these can be found in /sitecore/templates/System/Html Editor Profiles. Give a name in the ‘Click’ field, e.g. InsertCustomSymbols. You’ll need this again shortly.

Add child items to your button to create the “symbols” or text you need to insert into the RTE using Html Editor List Item template. The ‘Header’ value is what will be displayed in the dropdown list and ‘Value’ is what will get inserted (e.g. your greek symbols).

You now need to handle the click event of the button, create a file with the following JS. Make sure your command name matches your “Click” field from then previous step:

RadEditorCommandList["InsertCustomSymbols"] = function(commandName, editor, args) {
    var val = args.get_value();
    editor.pasteHtml(val);
    args.set_cancel(true);
}

Create a patch config to add the JS file:

<clientscripts>
  <htmleditor>
    <script src="/location/to/custom.js" language="javascript" key="customJs" />
  </htmleditor>
</clientscripts>

If you used the Drop Down Button then also add a css style to set the icon, it should also be the same name as the ‘Click’ field.

span.InsertCustomSymbols
{
  background-image:url('/path/to/icon.gif') !important;
}

I had to set the !important flag here, or would have to set the parent css classes too. I couldn’t find a nice way of loading an external css file into the Editor Page and didn’t really want to modify EditorPage.aspx so we can just load it using jQuery:

jQuery(document).ready(function($){
  loadCSS = function(href) {
     var cssLink = $("<link rel='stylesheet' type='text/css' href='"+href+"'>");
     $("head").append(cssLink); 
  };
  loadCSS("/location/to/custom/rte.css");
});

Add as many as you need, make sure you set the correct RTE profile.

You can find a bit more info in this Telerik Custom Dropdown demo

I didn’t dig into the exact implementation of the Symbol button, but if you wanted some thing similar the you could override the default Editor Configuration simply setting the ItemsPerRow string of the EditorSplitButton control:

editorSplitButton1.ItemsPerRow = "8";

And if you had selected the Html Editor Custom Drop Down template then the drop list would act like a normal looking select control, much like the font list.

Advertisements