The Nihlénanizer

Decorating away <span>-tags using Telerik RAD Editor with Microsoft Content Management Server 2002

I've latly been working on a MCMS 2002 project where one of the primary gools have been to make the public part of the site accessable following WAI recomendations. So in order to do that I went for Xhtml 1.0 Transitional. The ActiveX content editor shipping with MCMS 2002 is not compliant with xhtml standard (I secretly wonder if it's compliant with any html standard). It does stuff like not ending <li>-tags. 

The Problem

So I found Telerik r.a.d editor Lite Edition. It has has a license model where licensed MCMS 2002 customers are allowed to use it whitout any extra cost. The Telerik editor seemd to work as a charm, with one "small" issue. It put's <span>-tags around it's output. According to XHTML it's not allowed place block-level elements (such as <p> or <table>) inside an inline element (such as <a>, <span> or <font>). And there is your problem right there.

The Solution

Inpired of Paul Haack's exellent post "Using a Decorator to Hook Into A WebControl's Rendering for Better XHTML Compliance" I set of doing the following.

First off I have created my own HtmlTextWriter class in for the purpose you can read about in Pual's post.

publicclass CompliantHtmlTextWriter : HtmlTextWriter
{
    internal CompliantHtmlTextWriter(HtmlTextWriter writer) : base(writer)
    {
    }

    publicoverridevoid AddAttribute(string name, string value)
    {
        if(IsLanguageAttribute(name))
        {
            return;
        }

        base.AddAttribute (name, value);
    }

    privatebool IsLanguageAttribute(string name)
    {
        return String.Compare(name, "language", true, CultureInfo.InvariantCulture) == 0;
    }
}

Since I could see no conflict with what I'm about to do I reused it. Second step is to inherit from the Telerik editor Placehoder RadEditorPlaceHolderControl and decorate it a little.

publicclass CompliantRadEditor : RadEditorPlaceHolderControl
{
    public CompliantRadEditor() : base()
    {
    }

    protectedoverridevoid Render(System.Web.UI.HtmlTextWriter writer)
    {
        base.Render (new CompliantHtmlTextWriter(writer));
    }

    protectedoverride HtmlTextWriterTag TagKey
    {
        get
        {
            return HtmlTextWriterTag.Div;
        }
    }
}

As you can see I don't mess with much. The magic of course happens in the overridden TagKey property.

I had to override the Render method to and put in my own HtmlTextWriter to work. I don't really understand why but if I didn't I got really weird output. But there you have it; hopefully this is helpful to someone.

Update 2006-03-28:

In the name of usability I realized I shoud supply some example code for the aspx-pages to. So in the Foo.aspx fiile you need to change the reference from:

<%@ Register TagPrefix="Teleric" Namespace="Telerik.WebControls" Assembly="RadEditorPlaceHolder" %>

to something like:

<%@ Register TagPrefix="XhtmlCompliance" Namespace="MyProject.XhtmlCompliance" Assembly="MyProject" %>

And when using the editor in the html page change:

<Teleric:RadEditorPlaceHolderControl id="Radeditorplaceholdercontrol1" runat="server" PlaceholderToBind="FooPH"></Teleric:RadEditorPlaceHolderControl> 

To use the "new" editor:

<XhtmlCompliance:CompliantRadEditor id="Radeditorplaceholdercontrol1" runat="server" PlaceholderToBind="FooPH"></XhtmlCompliance:CompliantRadEditor>

Print posted @ Tuesday, March 21, 2006 8:37 AM