The FCKEditor in DNN allows for rich text editing, and as a WYSIWYG tool, it does a great job. A recurring goal for many of my DotNetNuke customers is to distribute content administrative rights to a broad audience. This is a realistic goal, and the FCKEditor helps to provide content administrators the tools to create and edit content without detailed knowledge of HTML.
Here’s my beef… The default toolbar set for the FCKEditor in DNN really give the content editors a lot of ways to kill the elegance of a well thought-out design. The top offenders are (in no particular order):
- Style list
- Insert Smiley
- Font Color
- Font
- Background Color
There are some configuration options available to anyone with file system access that I would recommend to any implementation of DNN. (Quick note: if you have multiple portals within an instance of DNN the changes you make will affect all portals.)
Clean Up the Toolbar
The default DNN toolbar gives the basic content administrator too many options. Most of the functions in the toolbar shouldn’t be used and clutter the users experience. In my opinion, we should only provide users the tools we want them to use. Personally, I hate the idea of someone applying inline styles or non-semantic markup to the site. Its too hard to account for (dummy proof) in the style sheets.
Solution: create a streamlined toolbar by modifying the fckconfig.xml file. Technically, you should create a custom toolbar and then apply permissions to this new toolbar. I don’t find any real benefit to doing it the “correct way.” In most cases I don’t provide a different set of tools to different users. Is is possible? Yes, but for most of the cases one toolbar is suffice. So I typically just modify the DNNDefault toolbarset.
How: Locate the fckconfig.js file in the website files for DNN. This file is located at [root]\Providers\HtmlEditorProviders\Fck\Custom. Within this file, there is a section that defines the functions available in the Toolbars (search for Toolbarsets). It looks a little something like this:
FCKConfig.ToolbarSets["DNNDefault"] = [
['Source','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
['Style','FontFormat'],['FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About']
] ;
You can easily see that the items listed in the Toolbar are easily mapped to features of the FCKEditor. By trimming this down to only the bare essentials and maybe even rearranging the features to be more intuitive, the FCKEditor can make content administration a breeze for your editors and you as the administrator can sleep easy at night knowing Smileys won't be showing up on your content.
To see my prefered toolbar in action download my preferred version of the DNNDefault toolbar (a txt file to allow you to paste into your fckconfig.js).
Use Only the Style List and Clean it Up
From a training standpoint the Style and Format lists are hard to differentiate. To a basic content administrator it is a list of ways to change the text. In reality the Format list applies different semantic markup options to the text and the Style list applies a mix of markup tags and inline styles. If you’re like me, giving users the ability to apply inline styles really gets your goat.
Solution: give the end user only one list to pick from and be very prescriptive about the options available to pick. To do this, you’ll want to clean up the list of styles offered by the FCK Editor
How: There are two steps to cleaning up the styles list. First, we need to get rid of “Red Title.” Why would anyone use this? Gross. To get rid of “Red Title” we need to delete a few lines of code from the file we were already editing for the toolbar (fckconfig.js)
FCKConfig.CustomStyles =
{
'Red Title' : { Element : 'h3', Styles : { 'color' : 'Red' } }
};
Just kill this code completely. Next, we’ll create a list of styles we do want to include for users to apply different styles to the content. Since we removed the Format list from the toolbar, we can incorporate the standard headings and any other semantic markup into the list of styles and remove the elements that produce inline styles. To edit the styles list, locate the file titled fckstyles.xml. This file is located here: [root]\Providers\HtmlEditorProviders\Fck\FCKeditor.
My approach is to typically comment out the section titled “Inline Styles” and then enable the “Block Styles.” I also like to move the paragraph to the top of the list. Click here for example of my fckstyles.xml file.
Obviously, there is a lot of personal preference to how content administrators should manage the content on your site. I like to be prescriptive and shepherd my content editors toward semantic markup. If you have other suggestions, let me know.