использование innerHTML в пользовательском теге в IE - PullRequest
Новая
       33

использование innerHTML в пользовательском теге в IE

3 голосов
/ 07 июня 2011

У меня есть проблема, которую я просто не могу решить, и мне нужен ваш совет, потому что у меня нет идей:

Контекст: я использую tinyMCE Editor на своем веб-сайте и разработал собственный плагин для включения внешних XML-файлов. Пока все работает как положено. Ссылки на внешние XML-файлы представлены в виде span-Tags: 

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

, но только в редакторе tinyMCE с пользовательским классом (xml_include), чтобы отличать их от обычного текста, и после перехода к представлению html / source code или сохранения эти теги span заменяются на элементы xi: include: 

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

Текст, который был установлен как innerHTML ("-XML Document 1] -") для тега (ов) span, служит заполнителем в редакторе и перемещается в теги 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 не может быть установлен innerHTML нового элемента «Domelm». Либо оно остается пустым, либо, если установлено явно, выдается ошибка. Доступ к 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 создания элементов, как видно в части "else" условия if выше ... if domelm.innerHTML = n.innerHTML; явно не задан, elm.innerHTML просто остается пустым, иначе те же ошибки, что и в вышеупомянутые подходы происходят, поэтому я мог бы также пропустить обнаружение if(tinymce.isIE) ..

Что еще я могу сделать? Предложения?

Я также удостоверился, что правильно объявил пользовательские пространства имен xml, изменил MIME-тип на application/xhtml+xml вместо простого text/html, «объявил» узел xi:include для IE с document.createElement('xi:include'); и вообще изменил код чтобы угодить IE .. и это, кажется, последняя серьезная ошибка, которую я должен преодолеть .. Я не уверен, что это ошибка в моем коде, так как FF и Chrome отлично работают локально и удаленно и не показывают никаких ошибок ..?

Любая помощь приветствуется, я надеюсь, что предоставил вам достаточно контекста, чтобы понять, что я имел в виду. и извините за ошибки, английский не мой родной язык:)

1 Ответ

4 голосов
/ 08 июня 2011

Хорошо, завершение пользовательского элемента в теге ap / 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>
...