使用 JavaScript 设置 tinyMCE 文本数据答案

【问题标题】：Setting tinyMCE text data using JavaScript使用 JavaScript 设置 tinyMCE 文本数据
【发布时间】：2019-11-06 16:55:57
【问题描述】：

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

在我看来，iframe 中有一个影子 DOM。当我在控制台中运行以下命令时，我得到 null 结果。

document.querySelector("#tinymce");
null

但是，如果我在控制台中从“top”切换到“mce_6_ifr”，我现在可以访问所需的数据：

我不确定如何在这方面取得进展。非常感谢任何帮助！

【问题讨论】：

iframe 中的 tinymce 对，所以你可以试试这个var iframe = document.getElementById('mce_6_ifr'); var element = iframe.contentWindow.document.querySelector("#tinymce");
嗨@mariappank 我试着运行这个“var iframe = document.getElementById('mce_6_ifr');”它返回未定义但 document.getElementById('mce_6_ifr');返回 iframe。这里有什么想法吗？
我认为它会工作document.getElementById("mce_6_ifr").contentWindow.document.getElementsByTagName("p")[0].innerText
TinyMCE 有一个 API 可以将内容加载到编辑器中：setContent()。您是否考虑过使用它而不是遍历 DOM？
@MichaelFromin 我不知道我会在这里将其作为替代解决方案进行检查，感谢您的输入！

【解决方案1】：

我认为它会起作用

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

【讨论】：

【解决方案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 的代码可能会中断。使用 API 可确保您不会随着时间的推移而损坏。

【讨论】：

谢谢迈克尔！这是一个很好的解决方案，从长远来看确实更可靠。我有新的需求出现在这里，现在我需要在不重新加载页面的情况下显示 HTML，因此不幸的是，使用 API 将不是一个选项。如果我错了，请纠正我。

【解决方案3】：

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

【讨论】：

很遗憾，我无法共享更多代码，因为这仅限于我的工作环境。使用 API 是否不需要重新加载页面来显示 API 中推送的数据？
您可以在编辑器加载到页面后的任何时候调用 TinyMCE 的 API，因此不需要重新加载页面。如果您无法共享代码（或以相同方式工作的简单示例），那么没有人可以告诉您如何正确使用 API。