使用 JavaScript 设置 tinyMCE 文本数据

Question

我正在尝试使用 javaScript 设置位于 tinyMCE body 内的 p 标签的 innerText，但不能似乎达到了元素。

Elements Tab of the Developer Tools.

在我看来，iframe 中有阴影 DOM。当我在控制台中运行以下内容时，我得到 null 结果。

document.querySelector("#tinymce");
null

但是，如果我在控制台中从 "top" 切换到 "mce_6_ifr"，我现在可以访问想要的数据：

Console Tab of the Developer Tools

我不确定如何推进此事。非常感谢任何帮助！

Answer 1

我认为它会起作用

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

Answer 2

TinyMCE 有 API 允许您将内容加载到编辑器中，这样您就不必手动遍历 DOM。

关键代码在TinyMCE init里面：

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

此代码使用 setContent() API 将您的 HTML 加载到编辑器中。

手动 DOM 遍历将起作用，但依赖于 TinyMCE 注入的 HTML ...如果以某种方式发生变化，您基于 DOM 的代码可能会中断。使用 APIs 可确保您不会随着时间的推移而破损。

Answer 3

@Harold 我无法想象为什么那行不通。也许您可以制作一个显示运行代码的 TinyMCE Fiddle？

Setting tinyMCE text data using JavaScript