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

Question

I have a problem I just can't solve, and need your advice since I'm out of ideas:

Context: I'm using tinyMCE Editor on my website and developed a custom plugin to include external xml files. So far everything works as expected. The links to the external xml files are represented as span-Tags:

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

but only in the tinyMCE editor with a custom class (xml_include) to distinguish them from normal text and upon switching to the html/source code view or saving, those span tags get replaced to xi:include elements:

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

The text that was set as innerHTML ("-XML Document 1]-") for the span tag(s) serves as placeholder in the editor and gets moved to the xi:include tag(s) in the source view and serves as placeholder there also.

---

Now to the problem:

The code to transform span.xml_include to xi:include gets called before the source code popup is displayed:

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

this code works perfectly fine in FF and Chrome, but not in IE (I tested 7 & 8): in IE the innerHTML of the new element "domelm" can't be set. Either it stays blank or if set explicitly an error is thrown. n.innerHTML can be accessed. I get an "Unknown runtime error" for the line domelm.innerHTML = n.innerHTML;

What else did I try?

• the native JS way: domelm.appendChild(document.createTextNode(n.innerHTML)); to create a text node and append it to the "domelm" with no success (getting error: "unexpected call to method or property access", that should be the translation from "Unerwarteter Aufruf oder Zugriff" (german version))

• the tinyMCE API way: tinymce.DOM.setHTML(domelm, n.innerHTML); resulted in no error but also the usual blank innerHTML

• the jQuery way: $('#domelm').html(n.innerHTML); or first var jQelm = $(domelm); then jQelm.text(...); or jQelm.html(...); doesn't matter, neither works, IE always returns "unexpected call to method" error in the jquery core, which I obviously won't touch..

• the tinyMCE way of creating elements as seen in the "else" part of the if condition above..if domelm.innerHTML = n.innerHTML; isn't explicitly set, elm.innerHTML just stays blank, else the same errors as on the approaches above occur, therefore I could as well skip the if(tinymce.isIE) detection..

What else can I do? Suggestions?

I also made sure to properly declare the custom xml namespaces, changed the MIME-type to application/xhtml+xml instead of simply text/html , "announced" the xi:include node for IE with document.createElement('xi:include'); and generally changed the code to please IE..and this seems to be the last major bug I have to overcome.. I'm not sure if it's an error in my code since FF and Chrome work fine local and remote and don't show any errors..?

Any help is appreciated, I hope I provided enough context for you so that it's clear what I meant. and sorry for mistakes, English is not my first language:)

Answer 1

Ok, wrapping the custom element in ap/div/span tag finally did the trick: I used span to leave the formatting unmodified..here is what I did:

In the "if(tinymce.isIE) part of the onPreProcess function, before "xi:include" is created, a wrapper is needed:

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

Appending the custom tag-element to the wrapper:

wrapper.appendChild(domelm);

and appending a textNode to the wrapper since appending it to the domelm throws errors:

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

and finally append the wrapper to the dom and replace the "span" tag (n) with the wrapped "xi:include" (wrapper, span tag to be modified):

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

The result is a custom "xi:include" tag in IE with the correct innerHTML:

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