Блог

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

Контекст: Я использую редактор 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 elements:

 <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 выше ..если 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 отлично работают локально и удаленно и не показывают никаких ошибок ..?

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

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