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和類屬性attributes變量：

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

這就是全部 - 構建項目並在您的項目中使用ACT庫的自定義dll。