Using innerHTML in a custom tag in IE

I have a problem that I just can't solve, and you need your advice because I have no ideas:

Context: I use the tinyMCE editor on my website and developed my own plugin to include external xml files. So far, everything is working as expected. Links to external XML files are presented 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 plain text and when switching to the html / source view or saving, those span tags are replaced by 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 a placeholder in the editor and moves to the xi: include tag in the source and also serves as a placeholder.


Now to the problem:

The code to convert span.xml_includeto xi:includeis called before the source code pop-up appears:

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 fine in FF and Chrome, but not in IE (I tested 7 and 8): in IE you cannot set the innerHTML of the new "domelm" element. Either it remains empty, or if an error is explicitly specified, an error occurs. Access n.innerHTML. I get an "Unknown runtime error" for a stringdomelm.innerHTML = n.innerHTML;

What else have I tried?

  • JS: domelm.appendChild(document.createTextNode(n.innerHTML)); node "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 , "else" if .., domelm.innerHTML = n.innerHTML; , elm.innerHTML , , , if(tinymce.isIE)..

? ?

xml, MIME- application/xhtml+xml text/html, "" xi:include node IE document.createElement('xi:include'); , IE.. , , , . , , FF Chrome .?

, , , , . , :)

+3
1

, p/div/span - : span, ... :

if (tinymce.isIE) onPreProcess, "xi: include" , :

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

- :

wrapper.appendChild(domelm);

textNode , domelm :

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

, , dom "span" (n) "xi: include" (, span, ):

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

"xi: include" IE innerHTML:

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

All Articles