Integrate R.A.D editor into MOSS 2007

Recently I got the task to integrate Telerik’s Rad Editor (5.2.2) into an existing WCM SharePoint 2007 project. The reason was to gain browser compatiblilty – especially Firefox support.

I was excited because I am not much of a frontend guy. So looking forward to get a closer look at what is going there was motivating.

The frustration started on Telerik’s homepage. It was quite hard to figure out that the Rad Editor for Moss is included in the ASP.NET Ajax controls package. And there were lots more to come. But with some sweat and tears, consulting the Telerik forums and documentation I worked out the following solution:

  1. Integrate the editor into pages.
    I use the RadHtmlField control in the publishing layouts to render the RichHtml fields.
  2. Web.config
    You need to install AJAX toolkit to get the editor working. The manual describes the procedure really well in case you are using ASP.NET 2.0. I am using 3.5 and things are somewhat different because the AJAX toolkit is part of the framework. I ‘stole’ the configuration from creating a blank web project and copy/paste the relavant parts to my existing web project.
  3. Configuration.
    I leave everything in the /wpresources folder and make my customizations there. In the end I wrap everyting from there with the Telerik DLLs into a new solution package (WSP).
  4. Scripting.
    I had quite some Javascript to extend the editor and did not have lot of experiences with that. For debugging I used VS 2008 in Internet Explorer and Firebug in Firefox. In Internet Explorer (7.0) you can simply attach to the debugger from the View menu. Attaching event handlers is done by adding them to the config.xml. Adding custom buttons is well described in the manual (Is it really?). I took some time to figure out the Javascript API of the editor. It is well documented in the manual. There a lot of built-in functions for stuff such as selecting text that works in all browser – so use it where ever you can!
  5. WYSIWYG
    Why does the HTML in edit mode do not look like the result in the page? Hmmm… I add the stylesheet with an import statement in the CssEditor.css in /wpresources and still nothing happens. Ok, the editor is rendered in an IFrame. Therefore all the css classes higher in the tree do not apply. To circumvent this I added an OnLoad script that puts my css class on the body element (see below):
  6. Translation.
    The editor did not come in my language. So I had to create a new resx file for the toolbar. That was easy to do but where to put it? Placing the file under inetpub in the App_GlobalResources for the web applicaiton is the right place to put. This gives only a minor headache during deployment.
  7. Deployment.
    Ok, the editor comes in a nice solution package. But how do I get my customizations into it? My first strategy was to leave the package as is and deploy my customization in a second package over it. Because I like to use WSPBuilder I tried to deploy to /wpresources which is not possible unless you deploy the Telerik assemblies in the same package to the GAC. So the solution was to re-package the whole thing which actually was quite easy. I also put the translated resx file into the package and deploy it to 12/config/resources and copy it with the ‘stsadm -o CopyAppBinContent’ to the inetpub folder(s).

To sum it all up it was a great experience to work with the control. I never thought that it would be so much hassle to get this working. I especially miss some good documentation on that are specific to the MOSS version of the editor.

Leave a Reply

Your email address will not be published. Required fields are marked *