在 IE 的自定義標簽中使用 innerHTML

Question

我有一個我無法解決的問題，由於我沒有想法，需要你的建議：

背景：我在我的網站上使用 tinyMCE 編輯器並開發了一個自定義插件以包含外部 xml 文件。 到目前為止，一切都按預期工作。 外部 xml 文件的鏈接表示為跨度標記：

<span id="-[XML Document 1]-" title="erg" class="xml_embed xml_include">-[XML Document 1]-</span>

但僅在 tinyMCE 編輯器中使用自定義 class (xml_include) 以將它們與普通文本區分開來，並且在切換到 html/源代碼視圖或保存時，這些 span 標簽將替換為 xi:include 元素：

<xi:include xmlns:xi="http://www.w3.org/TR/XInclude" show="xml_embed" href="erg">-[XML Document 1]-</xi:include>

為 span 標記設置為 innerHTML（“-XML 文檔 1]-”）的文本在編輯器中用作占位符，並在源視圖中移動到 xi:include 標記並用作占位符還有。

---

現在解決問題：

在顯示源代碼彈出窗口之前調用將span.xml_include轉換為xi:include的代碼：

ed.onPreProcess.add(function(ed, o) {
var elm;
var domelm;
//get all span.xml_include elements
tinymce.each(ed.dom.select('span.xml_include', o.node), function(n) {
//IE ignores innerHTML when created with tinymce.dom, therefore use native JS createElement method to tell IE that custom tag is valid HTML
    if(tinymce.isIE)
    {
        domelm = document.createElement('xi:include');
        domelm.setAttribute("xmlns:xi", "http://www.w3.org/TR/XInclude");
        domelm.href = n.title;
        domelm.innerHTML = n.innerHTML;
        domelm.show = n.className.split(/\s+/)[0];
        document.body.appendChild(domelm);
        ed.dom.replace(domelm, n);
    }
    else
    {
        //ed = tinyMCE.activeEditor
        elm = ed.dom.create('xi:include', {href: n.title, show: n.className.split(/\s+/)[0]}, n.innerHTML);
        elm.setAttribute("xmlns:xi", "http://www.w3.org/TR/XInclude");
        ed.dom.replace(elm, n);
    }
  });
});

此代碼在 FF 和 Chrome 中運行良好，但在 IE 中無法正常工作（我測試了 7 和 8）：在 IE 中，無法設置新元素“domelm”的 innerHTML。 它要么保持空白，要么如果明確設置，則會引發錯誤。 n.innerHTML 可以訪問。 我收到domelm.innerHTML = n.innerHTML;

我還嘗試了什么？

• 原生JS方式： domelm.appendChild(document.createTextNode(n.innerHTML)); 創建一個文本節點和 append 到“domelm”，但沒有成功（出現錯誤：“意外調用方法或屬性訪問”，應該是“Unerwarteter Aufruf oder Zugriff”（德語版）的翻譯）

• tinyMCE API 方式： tinymce.DOM.setHTML(domelm, n.innerHTML); 導致沒有錯誤，但也是通常的空白 innerHTML

• jQuery 方式： $('#domelm').html(n.innerHTML); 或第一個var jQelm = $(domelm); 然后jQelm.text(...); 或jQelm.html(...); 沒關系，兩者都不起作用，IE總是在jquery核心中返回“意外調用方法”錯誤，我顯然不會碰它。

• tinyMCE 創建元素的方式如上面 if 條件的“else”部分所示..if domelm.innerHTML = n.innerHTML; 沒有明確設置，elm.innerHTML 只是保持空白，否則會發生與上述方法相同的錯誤，因此我也可以跳過if(tinymce.isIE)檢測..

我還可以做些什么？ 建議？

我還確保正確聲明自定義 xml 命名空間，將 MIME 類型更改為application/xhtml+xml而不是簡單的text/html ，使用document.createElement('xi:include'); “宣布”IE 的xi:include節點document.createElement('xi:include'); 並且通常將代碼更改為取悅 IE ..這似乎是我必須克服的最后一個主要錯誤..我不確定這是否是我的代碼中的錯誤，因為 FF 和 Chrome 在本地和遠程都可以正常工作並且不顯示任何錯誤..？

感謝您提供任何幫助，我希望我為您提供了足夠的背景信息，以便清楚我的意思。 對不起，英語不是我的第一語言:)

Answer 1

好的，將自定義元素包裝在 ap/div/span 標記中終於成功了：我使用 span 使格式保持不變..這是我所做的：

在 onPreProcess function 的“if(tinymce.isIE)”部分中，在創建“xi:include”之前，需要一個包裝器：

var wrapper = document.createElement('span');

將自定義標簽元素附加到包裝器：

wrapper.appendChild(domelm);

並將 textNode 附加到包裝器，因為將其附加到 domelm 會引發錯誤：

wrapper.appendChild(document.createTextNode(n.innerHTML));

最后 append 將包裝器包裝到 dom 並用包裝的“xi:include”替換“span”標簽（n）（包裝器，要修改的span標簽）：

document.body.appendChild(wrapper);
ed.dom.replace(wrapper, n);`

結果是在 IE 中使用正確的 innerHTML 自定義“xi:include”標簽：

<span><xi:include xmlns:xi="http://www.w3.org/TR/XInclude" href="eh" show="xml_embed">-[XML Document]-</xi:include></span>