Настройка текстовых данных tinyMCE с использованием JavaScript

Question

Я пытаюсь установить innerText тега p , расположенного внутри tinyMCE body здесь, используя javaScript, но, похоже, не могу достичь элемента.

Вкладка «Элементы» в инструментах разработчика.

Мне кажется, в iframe есть теневой DOM. Например, когда я запускаю следующее в консоли, я получаю null .

document.querySelector("#tinymce");
null

Однако, если я переключаюсь в консоли с "top" на "mce_6_ifr", я могу теперьдостичь требуемых данных:

Консольная вкладка инструментов разработчика

Я не уверен, как двигаться дальше в этом направлении. Любая помощь очень ценится!

Answer 1

TinyMCE имеет API-интерфейсы, которые позволяют загружать контент в редактор, чтобы вам не приходилось выполнять обход DOM вручную.

Вот полностью рабочий пример: http://fiddle.tinymce.com/qigaab

Код ключа находится внутри инициализации TinyMCE:

setup: function (editor) {
  editor.on('init', function (e) {
    editor.setContent('<p>This is content set via the init function</p>');
  });
}

Этот код использует для загрузки API setContent()Ваш HTML-код в редакторе.

Ручной обход DOM будет работать, но полагается на HTML, который внедряет TinyMCE ... если это каким-то образом изменится, ваш код на основе DOM может сломаться. Использование API гарантирует, что вы не получите поломку с течением времени.

Answer 2

@ Гарольд Я не могу представить, почему это не сработает. Возможно, вы можете сделать TinyMCE Fiddle, который показывает работающий код?

Answer 3

Я думаю, что это будет работать

document.getElementById("mce_6_ifr").contentWindow.document.getElementsByTagName("p")[0].innerText