在 IE 的自定义标签中使用 innerHTML

Question

我有一个我无法解决的问题，由于我没有想法，需要你的建议：

上下文：我在我的网站上使用 tinyMCE 编辑器并开发了一个自定义插件来包含外部 xml 文件。到目前为止，一切都按预期工作。外部 xml 文件的链接表示为 span-Tags：

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

但仅在带有自定义类 (xml_include) 的 tinyMCE 编辑器中以将它们与普通文本区分开来，并且在切换到 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)); 创建文本节点并将其附加到“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”部分所示。如果没有明确设置 domelm.innerHTML = n.innerHTML;，elm.innerHTML 将保持空白，否则会出现与 on 相同的错误发生上述方法，因此我也可以跳过if(tinymce.isIE) 检测..

我还能做什么？有什么建议吗？

我还确保正确声明自定义 xml 命名空间，将 MIME 类型更改为 application/xhtml+xml 而不是简单的 text/html，使用 document.createElement('xi:include');“宣布”IE 的 xi:include 节点，并且通常更改了代码取悦 IE ..这似乎是我必须克服的最后一个主要错误.. 我不确定这是否是我的代码中的错误，因为 FF 和 Chrome 在本地和远程都可以正常工作并且没有显示任何错误..？

感谢任何帮助，我希望我为您提供了足够的上下文，以便清楚我的意思。对不起，英语不是我的第一语言:)

Answer 1

好的，将自定义元素包装在 p/div/span 标记中终于成功了：我使用 span 保持格式不变..这就是我所做的：

在onPreProcess函数的“if(tinymce.isIE)”部分，在创建“xi:include”之前，需要一个包装器：

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

将自定义标签元素附加到包装器：

wrapper.appendChild(domelm);

并将 textNode 附加到包装器，因为将其附加到 domelm 会引发错误：

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

最后将wrapper附加到dom中，将“span”标签（n）替换为被包装好的“xi:include”（wrapper，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>