DotNetNuke, ASP.NET, Web Development Blog

Custom Toolbars in the FCKEditor Provider for DNN

When it comes to the toolbars for Rich Text Editors for clients to use to update there own sites, it is my firm belief that less is more. By default, the toolbars seem to be cluttered with endless options that rarely get used and in the end just make it harder to find the options users do need.

The FCKEditor Provider for DotNetNuke is great overall and exposes almost everything you need to set it up just they way you want it, including setting up different custom toolbars for different types of users (determined by role). But I haven't found much clear and concise documentation for adding your own custom toolbars. Here is how I do it...

  1. Add a new Toolbar definition to Providers/HtmlEditorProviders/FckHtmlEditorProvider/custom/FCKConfig.js. The easiest way to do this is to copy one of the existing ones and then remove the tools you don't want. I'll give an example of mine at the bottom.
  2. Modify your web.config file and add your new toolbar definition to the comma separated list for AvailableToolBarSets
  3. Also in the web.config look for DefaultToolbarSet and set that to your desired default.
  4. You'll then need to clear the old FCKConfig.js file from your browsers (and perhaps your users) cache. I ended up navigating to the actual js file and hitting as neither F5 or Ctrl+F5 from the edit page worked for me.

My new toolbar definition that I added to the custom FCKConfig.js file:

FCKConfig.ToolbarSets["EfficionStandard"] = [
    ['Source','DocProps','-','Save','NewPage','-'],
    ['Cut','Copy','Paste','PasteText','PasteWord'],
    ['Undo','Redo','RemoveFormat'],
    ['Bold','Italic','Underline'],
    ['OrderedList','UnorderedList','-','Outdent','Indent'],
    ['JustifyLeft','JustifyCenter','JustifyRight'],
    ['Link','Unlink'],
    ['Image','Rule'],
    ['Style','TextColor']
] ;

Remember, less is more! And if you find better documentation for doing this, please let me know.

Comments

Leave a Comment
Gravatar
Name:
Email: (not displayed)
Comments:

CAPTCHA image
Enter the code shown above:
Website

Return to previous page