Adding functionality to the Sitecore Rich Text Editor – Part 1

When developing a Sitecore site there are a number of things that can be done to make a content editor’s life easier.  One of the tools that Sitecore provides is the ability to enhance the rich text editor (RTE) by adding your own buttons.In this post we will walk through adding and implementing a new button in the RTE.  Our new RTE button will take the currently highlighted text and replace it with a list of the tweets that mention the highlighted text.Let’s start by switching to the core database and navigate to /sitecore/system/Settings/Html Editor Profiles/Rich Text Full.  This is where all of the bits and pieces of the RTE live.  If you haven’t had a look around here before it would be worth your while to take a few minutes to see what’s here.Now we’ll insert a new Html Editor Button in Toolbar 1.  Name it something clever – like “Twitter” and give it a fancy icon.  Our new button needs something entered in the Click field.  This is the name of the command that will be invoked when the button is punched, let’s implement that now.In Visual Studio open up the file “[Your site]\sitecore\shell\Controls\Rich Text Editor\RichText Commands.js”.    We’ll make an addition to the RadEditorCommandList.  It’s important that key used in array match the command name that was entered in the “Click” field.Copy in the code below.[sourcecode language="javascript"]RadEditorCommandList["Twitter"] = function (commandName, editor, tool) { var html = editor.getSelectionHtml(); //TODO validate, etc. We'll just assume everything is good, what could go wrong... var jsonUrl = 'https://api.twitter.com/search.json?q=%23' + escape(html) + '&page=1&callback=?'; getJSONP(jsonUrl, function (data) { if (data) { var s = 'What people are tweeting about <a href="https://twitter.com/#!/search/' + html + '">#' + html + '</a>' for (var i = 0; i < data.results.length; i++) { s = s + '<a href="https://twitter.com/#!/' + data.results[i].from_user_name + '">@' + data.results[i].from_user_name + '</a>: ' + data.results[i].text + ''; } editor.pasteHtml(s, "DocumentManager"); } });}//Thanks stackoverflow//http://stackoverflow.com/questions/2499567/how-to-make-a-json-call-to-a-urlfunction getJSONP(url, success) { var ud = '_' + +new Date, script = document.createElement('script'), head = document.getElementsByTagName('head')[0] || document.documentElement; window[ud] = function (data) { head.removeChild(script); success && success(data); }; script.src = url.replace('callback=?', 'callback=' + ud); head.appendChild(script);}[/sourcecode]The anonymous function is called by the editor when the button is clicked. From the editor it uses the currently highlighted text and the Twitter API to retrieve a JSON array of tweets. It then uses the JSON response to update the content.Save this file and let’s head back into Sitecore. Switch to the Master database and create a new item that has a RTE. Pop open the editor, type then highlight some text and push the new Twitter button.Before:(click)After:Pretty cool, right? We just gave a content editor the ability to quickly and consistently list out the top Tweets about a topic.  While this may not have been the best example I hope it illustrates another option for helping a content editor do their job.See also:http://sitecorejm.blogspot.com/2007/02/cleanup-html-with-one-button-click.htmlhttp://briancaos.wordpress.com/2008/06/12/sitecore-53-adding-your-own-buttons-to-the-richtext-editor/Stay tuned for next time, when we’re going to dive into creating a SheerUI control, which will allow us to create even more powerful tools to aid users.If you want to work ahead here are some great resources:http://www.markstiles.net/Blog/2012/02/17/adding-button-to-rich-text-editor-in-sitecore-6-4.aspxhttp://sitecoreaustralia.wordpress.com/2009/08/11/working-with-external-scripts-within-the-rich-text-editor/http://sdn.sitecore.net/Articles/XML%20Sheer%20UI.aspxhttp://sdn.sitecore.net/upload/sitecore6/64/client_configuration_cookbook_sc64-usletter.pdf