使用JavaScript设置tinyMCE文本数据

我试图使用javaScript设置tinyMCE主体中p标记的innerText，但似乎无法到达元素

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

document.querySelector("#tinymce");
null

但是，如果我在控制台中从“top”切换到“mce_6_ifr”，我现在可以获得想要的数据：

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

我认为它会起作用

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

---

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>');
  });
}

设置：函数（编辑器）{
编辑器.on（'init'，函数（e）{
setContent（“这是通过init函数设置的内容”
”；
});
}

此代码使用

setContent（）

API将HTML加载到编辑器中

---

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

@Harold我无法想象为什么那样不行。也许您可以制作一个TinyMCE小提琴来显示正在运行的代码？

iframe右侧的TinyMCE，这样您就可以试试这个

var iframe=document.getElementById（'mce_6_ifr'）；var元素=iframe.contentWindow.document.querySelector（“#tinymce”）

HI@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我不知道我会在这里检查它作为替代解决方案谢谢你的输入！谢谢你，迈克尔！这是一个很好的解决方案，从长远来看似乎更可靠。我有新的需求出现在这里，现在我需要在不重新加载页面的情况下显示HTML，因此使用API将不是一个选项，因为不幸的是。如果我错了，请纠正我。不幸的是，我无法共享更多代码，因为这仅限于我的工作环境。使用API是否不需要重新加载页面以显示在API中推送的数据？在编辑器加载到页面上后，您可以随时调用TinyMCE的API，因此不需要重新加载页面。如果您不能共享代码（或者一个简单的例子，它以同样的方式工作），那么就没有更多的人可以告诉您如何正确使用API。