So like me I am sure that you have installed and deployed the free replacement editor control from Telerik. This is great and works really well when working with Cross-Browsers. However maybe you knew or maybe you didn't there is another version of this editor for those of us that are licensed to use the full Telerik Suite of Controls. If you do then you can download the following file:
RadEditorMOSS_5_3_0_Dev.zip
Once downloaded if you extract the zip file you should find the following components inside:
Notice there is a solution package file that can be installed. To do this use the following command:
Obviously make sure the "-filename" parameter is the actual path to the WSP file, not the one I have here, unless you have store it directly on your C Drive. So once this completes you should be able to access Central Administration then click the operations tab and select the link for solution management.
When this load you should see your WSP file listed and you can then simply deploy it to your web application that you choose. Once deployed you are ready to activate the new control. So let's say that you have a web application with a URL called http://intranet.labs.local you simply need to access that site and access the site features link from site settings. When this loads the following features should be listed:
For this purpose I am only going to activate the "Use RadEditor to edit List Items" feature. Before we do let's remind ourselves what the out-of-the-box editor looks like:
Things that are really missing from the out-of-the-box editor are:
- Spell Check
- Better HTML Editor
- Preview before saving
- Better "Word Like" functionality
When we now activate the feature the new toolbar looks as shown below:
Notice how different it looks, you will see some better "Word Like" features as well as an editor, html and preview window at the bottom, there is also the ability to resize the editor while using it. As you can see this is a great addition to the SharePoint world, however I am not just going to show you how to add it, I want to take through how to add toolbar items and change the feature set within the editor. So firstly let's look at what makes up the editor. When the control is installed from the WSP file creates the following folder structure (The Version number for the Full Version Dev is as shown below, if you have the free version it will be different) underneath "C:\Program Files\Common Files\microsoft shared\Web Server Extensions\wpresources\":
RadEditorSharePoint\5.3.0.0__1f131a624888eeed\Resources
If we look inside the folder we see the following:
The key components here are the configuration files. The main ones that we will modify are, ListConfigFile and ListToolsFile. Firstly let's open up the ListConfigFile and see how it is structured:
The first change to make here is the skin parameter, if you have installed the full Telerik control quite you should find the following skins:
These can be accessed from "C:\Program Files\Telerik\RadControls for ASPNET AJAX Q2 2008\Skins" directory. So to change the skin we simply change the name of the skin parameter to match the skin in the folder.
When we now refresh the editor control in our list it re-renders with the new skin.
Some examples of the skins you can use are shown below:
So what else can we change? Well let's go back to the ListConfigFile and breakdown the parameters.
|
Parameter |
Details |
|
ConvertToXhtml |
Very simple, renders the control using Xhtml |
|
EnableDocking |
Allow the toolbar controls to be docked around the editor |
|
ShowPreviewMode |
Self Explanatory |
|
Height |
Self Explanatory |
|
Width |
Self Explanatory |
|
Skin |
Self Explanatory |
So now let's look at the ListToolsFile, this contains the individual toolbar settings that are rendered within the editor.
As you can see it is made up of "<tools>" and "<tool>" sections with individual toolbar items. If we remove the base ones as shown above we can create our own. The following is a sample of what could be created:
If we put all this together and then refresh our editor we end up with the following:
Notice how the spell check is now available, this is a simple one line added to the ListToolsFile:
Another option that we have using the control is to add modules into the ListToolsFile; these are built in components that render details to the control. As an example if we add the following we will then see the following appear in the editor.
You can also add the following modules with the following results:
You are also able to add custom context menus for specific tags that are used within the editor, the following example displays different context menus based on the HTML tag you right click on.
This example will show different menus based on either generally right clicking in the editor or selecting a specific tag block and right clicking:
General Right Click
Right Click on a Font Tag
Right Click on a Table Tag
As you can see you have great flexibility when using the replacement control. If you are after a reason to purchase the full suite of controls from Telerik this is one of them and a really good one too. In a few up and coming posts I will outline how I have made use of the Telerik Controls in a web part I have been building. J