HTMLEditorExtender removes "class", "id" attributes

Question

The HTMLEditorExtender seems to be stripping "class" and "id" attributes of my HTML elements, even with EnableSanitization="false".

Is this the default behavior? Is there a work-around?

I'm using the latest release of AjaxControlToolkit.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server" Width="100%"></asp:TextBox>
<ajaxToolkit:HtmlEditorExtender ID="TextBox1_HtmlEditorExtender" runat="server" EnableSanitization="false"
    DisplaySourceTab="true" TargetControlID="TextBox1">
</ajaxToolkit:HtmlEditorExtender>
<asp:Button ID="Button1" runat="server" Text="Button" />

Answer 1

You need to download sources of AjaxControlToolkit library and tweak them slightly for your needs. There are two files those must be modified:

HtmlEditorExtenderBehavior.Pre.js Let's tweak the _encodeHtml function in this file:

_encodeHtml = function () {
    //Encode html tags
    var isIE = Sys.Browser.agent == Sys.Browser.InternetExplorer;

    // code below to the next comment below can be removed completely if you 
    // want to preserve 'width' attribute as well
    var elements = this._editableDiv.getElementsByTagName('*');
    var element;
    for (var i = 0; element = elements[i]; i++) {
        /*
        try {
        element.className = '';
        element.removeAttribute('class');
        } catch (ex) { }
        try {
        element.id = '';
        element.removeAttribute('id');
        } catch (ex) { } */
        try {
            element.removeAttribute('width');
        } catch (ex) { }
        if (isIE) {
        }
    }
    // end of part of code that may be removed

    var html = this._editableDiv.innerHTML;
    if (isIE) {
        //force attributes to be double quoted
        var allTags = /\<[^\>]+\>/g;
        html = html.replace(allTags, function (tag) {
            var sQA = '';
            var nQA = '';
            if (tag.toLowerCase().substring(0, 2) != '<a') {
                sQA = /\=\'([^\'])*\'/g; //single quoted attributes
                nQA = /\=([^\"][^\s\/\>]*)/g; //non double quoted attributes
                return tag.replace(sQA, '="$1"').replace(nQA, '="$1"');
            }
            else {
                return tag;
            }
        });
    }
    //convert rgb colors to hex
    var fixRGB = this._rgbToHex;
    var replaceRGB = function () {
        html = html.replace(/(\<[^\>]+)(rgb\s?\(\d{1,3}\s?\,\s?\d{1,3}\s?\,\s?\d{1,3}\s?\))([^\>]*\>)/gi, function (text, p1, p2, p3) {
            return (p1 || '') + ((p2 && fixRGB(p2)) || '') + (p3 || '');
        });
    };
    //twice in case a tag has more than one rgb color in it;
    replaceRGB();
    replaceRGB();
    // remove empty class and id attributes
    html = html.replace(/\sclass\=\"\"/gi, '').replace(/\sid\=\"\"/gi, '');
    //converter to convert different tags into Html5 standard tags
    html = html.replace(/\<(\/?)strong\>/gi, '<$1b>').replace(/\<(\/?)em\>/gi, '<$1i>');
    //encode for safe transport
    html = html.replace(/&/ig, '&amp;').replace(/\xA0/ig, '&nbsp;');
    html = html.replace(/</ig, '&lt;').replace(/>/ig, '&gt;').replace(/\'/ig, '&apos;').replace(/\"/ig, '&quot;');
    return html;
}

Draw attention to commented block of code above.

HtmlEditorExtender.cs This is a server control code file and you need to slightly change the Decode method:

public string Decode(string value)
{
    EnsureButtons();

    string tags = "font|div|span|br|strong|em|strike|sub|sup|center|blockquote|hr|ol|ul|li|br|s|p|b|i|u|img";
    string attributes = "style|size|color|face|align|dir|src";
    string attributeCharacters = "\\'\\,\\w\\-#\\s\\:\\;\\?\\&\\.\\-\\=";

Add id and class attributes to attributes variable:

string attributes = "style|size|color|face|align|dir|src|class|id";

That's all - build project and use custom dll of ACT library in your project.