If you’re like me, you probably aren’t a huge fan of the text editors that ship with SharePoint 2007. Aside from known browser compatibility issues, they aren’t all that great from a usability standpoint either. I figured this out fairly early on when I was training our users on how to author content in SharePoint.
Take, for example, the “insert hyperlink” button that appears in the editor toolbar. I noticed that in some places it button would bring up a nice “browse” dialog that lets the user easily select a link target. In other places, I’d get a stripped down dialog box with two fields: Text to Display and Address. In this second case, I’d have the daunting task of trying to explain to non-technical users how to copy-and-paste URLs to documents and other targets into this dialog. Not great from a usability design perspective.
If you’re thinking of trying to customize the built-in editors to make them more usable or cross-browser, I’d recommend against it (at least until the process hopefully becomes easier). I started down this path and was soon dismayed to find that fixing the text editors involves modifying or overriding core JavaScript files in the 12 hive.
Furthermore, customizing the built-in text editors involves customizing multiple controls. On the one hand, SharePoint uses an HTML editor control for Content Editor Web Parts and for Web Content Management (authoring/editing pages). On the other hand, it uses a Rich Text editor control for rich text (and enhanced rich text) fields in lists.
(Note: If you want to specifically customize the HTML text editor in SharePoint without worrying about the Rich Text editor, you can modify the RTE2ToolbarExtension.xml file that’s stored in the Editing Menu folder of the Master Page gallery. This allows at least some level of customization without modifying core JS files.)
So instead of trying to customize the editors that ship with SharePoint, I recommend replacing them. Specifcally, I recommend using the free RadEditor control from Telerik (a company who works closely with Microsoft). It’s an ASP.NET control that renders a textarea with an editing toolbar, similar to how the built-in editors are rendered. The difference, though, is that it’s cross-browser, more usable, and easier to customize. Also, it gives you the option to use the nice “browse” dialogs (called Asset Picker Dialogs) built into SharePoint or use the cross-browser dialogs designed by Telerik.
Here are the steps to get it installed on your server farm:
- Install ASP.NET AJAX Extensions 1.0 on all web front-end servers in the farm.
- Download the RadEditor control from Telerik.
- Install it (can be done globally or on a per-web application basis).
Note that the RadEditor installation instructions (#3 above) differ slightly for WSS and MOSS. The documentation contains links to both sets of instructions.
The next step is to tell SharePoint where to use it (use any or all of these links, depending where you want it used):
- Using RadEditor in List Items
- Using RadEditor Web Part (in place of the Content Editor Web Part)
- Using RadEditor for Web Content Management (Page Authoring/Editing)
Lastly, you have two dialog choices for the “Insert Hyperlink” and “Insert Image” buttons on the RadEditor toolbar. The first choice is to use the cross-browser dialogs designed by Telerik. The second is to use the Asset Picker Dialogs built into SharePoint. You may want to examine the trade-offs before you decide.
If you decide to go with the Asset Picker Dialogs built into SharePoint, read Telerik’s instructions that talk about which config files to modify. To swap out the dialogs, go to each applicable config file, and look for the tools named ImageManager and LinkManager. To use the Asset Pickers, simply add MOSS (all caps) to the front of the tool names (e.g. MOSSImageManager). Note that this will only work in MOSS, not WSS (because the Asset Pickers aren’t included as part of WSS).
And that’s it. For information about how to further customize the toolbar (add/remove buttons, add new CSS styles, etc.), see the RadEditor documentation.
