All about the Strategy, Design, Customisation, Deployment and Development of SharePoint and its related Technologies

  Administration   All Me!! Baby!!   BDC   Book Review   Business   CKS   Conferences   CQWP   Development   Duffer Moments   Email   Errors   Family   Fixes   General   Groove   How To   How To Code   InfoPath   iPhone   IRM   Longhorn   Lotus Notes   Migration   Mobility   Office System 2007   Personal Projects   Powershell   Records Management   Search Server   Security   SharePoint   Silverlight   SQL   Tech Ed 2008   Testing   Vista   VSTO   WSS   XSL

[25/11/2008] Telerik RadEditor Control and MOSS 2007
 
Categories: Development, How To, Office System 2007, SharePoint, WSS
 

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:

  1. Spell Check
  2. Better HTML Editor
  3. Preview before saving
  4. 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

 
4 Comments
 

Comments

Thursday, 27 Nov 2008 11:46 by Tobias Zimmergren
Cheers Liam! I've been using it for a while (Lite version foremost) and it's awesome. Looking forward to see some additional thoughts on ajusting the control ;-)

Friday, 28 Nov 2008 04:43 by Mike
I tried the Telerik RAD Editor and ending up returning it. The editor loads in a different page context and does not display the content in edit mode using the styles in effect in display mode. I went back and forth for weeks with their support team tring javascript and config file hacks to get the styles to show up in edit mode. Then they released a minor dot version and the styles didn't work any more. It ended up being too much trouble for just a couple of extra things, losing the styles in edit mode outweighed any of the other little things. I was expecting it to work much better given all the hype it receives from SharePoint MVPs.

Wednesday, 3 Dec 2008 02:30 by Dan
Hey Liam, I tried the telerik editor a while ago and was dissapointed that it didn't support reusable content (in the WCM context). Do you know if it now supports it? p.s Thanks for the article.

Thursday, 18 Dec 2008 05:00 by Andy Burns
Hi Liam, What about Styles (e.g. paragraph or heading styles), as when editing content in a publishing page? Does it support that? And can we restrict a user to those styles - so we can change the styles later and change the whole website ?

Name:

URL:

Email:

Comments: