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

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

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

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

но только в редакторе tinyMCE с пользовательским классом (xml_include), чтобы отличить их от обычного текста, и при переключении на представление html/исходного кода или сохранении эти теги 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" (нем. версия))

  • способ API tinyMCE: 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(tinymce.isIE)..

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

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

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


person hreimer    schedule 07.06.2011    source источник
comment
Вы уверены, что DOM загрузился перед запуском этого кода? У IE, скорее всего, будут проблемы, если DOM не загружен.   -  person js1568    schedule 07.06.2011
comment
хорошо, я поместил часть IE в $(document).ready(function(){ //here the code// }); , это ничего не изменило .. но спасибо за подсказку   -  person hreimer    schedule 07.06.2011


Ответы (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>
person hreimer    schedule 08.06.2011