3

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

背景：我在我的网站上使用 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 只是保持空白，否则会发生与上述方法相同的错误，因此我可以好吧跳过if(tinymce.isIE)检测..

我还可以做些什么？建议？

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

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

4

1 回答 1

4

好的，将自定义元素包装在 ap/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));

最后将包装器附加到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>
于 2011-06-08T09:46:11.070 回答