15 December 2010

Cleanup html with one button click

It is possible to create your own buttons in the rich text editor. This can be used to create your own functionality. For instance I recently had to make a button that cleans up the HTML entered in a rich text field. Now this functionallity is allready present in Sitecore, but it is devided into 5 steps. E.g. remove font tags, remove span tags etc.
In this particullar case we wanted a button to perform a cleanup tasks, that included three of these methods. Instead of clicking three times to remove font tags, css styling and word formatting, we needed to create a button that did all of these tasks, by clicking one time only. This can be done by:

Step 1:
Create the button in Sitecore. The buttons for the editor is found in here: Sitecore > System > Settings > Html Editor Profiles > Rich Text Default > Toolbar X.
Now copy an existing button and rename it to what ever you like. In this instance we'll call it CustomCleanup. In the field "Click" you can enter a string, that will be fired when the button is clicked. You can later catch when this message is fired. Put in what ever string you like. In this case we'll enter "CustomCleanupTask".

Step 2:
Now we need to catch the message. This is done in the javascript file: sitecore/shell/Controls/Rich Text Editor/RichText Commands.js. Now add the following to the file:



   1:  RadEditorCommandList["CustomCleanupTask"] = function(commandName, editor, tool) {
   2:   
   3:  /* Fire new events */
   4:  editor.Fire("CSS",tool);
   5:  editor.Fire("FONT",tool);
   6:  editor.Fire("WORD",tool);
   7:   
   8:  };
P.s. you can alter the icon on the button, by adjusting the Icon field on the button. This path is taken from /sitecore/shell/RadControls/Editor/Skins/*/Buttons

Now you have your new functionality. Remember to clear the cache.

No comments:

Post a Comment