asp.net - HTMLEditorExtender 删除 "class"、 "id"属性

Question

HTMLEditorExtender 似乎正在剥离我的 HTML 元素的“class”和“id”属性，即使使用 EnableSanitization="false"也是如此。

这是默认行为吗？有解决办法吗？

我正在使用最新版本的 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

您需要下载 AjaxControlToolkit 库的源代码并根据您的需要稍微调整它们。有两个文件必须修改:

HtmlEditorExtenderBehavior.Pre.js 让我们调整此文件中的 _encodeHtml 函数:

_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;
}

请注意上面注释的代码块。

HtmlEditorExtender.cs 这是一个服务器控制代码文件，您需要稍微更改一下Decode方法:

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\\:\\;\\?\\&\\.\\-\\=";

将 id 和 class 属性添加到 attributes 变量:

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

这就是全部 - 构建项目并在项目中使用 ACT 库的自定义 dll。