使用JavaScript设置tinyMCE文本数据

我试图在此处使用javaScript设置位于tinyMCE body 中的 p 标记的innerText,但似乎无法到达该元素。

Elements Tab of the Developer Tools.

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

document.querySelector("#tinymce");
null

但是,如果我在控制台中从“顶部”切换到“ mce_6_ifr”,则现在可以访问所需数据:

Console Tab of the Developer Tools

我不确定该如何前进。 任何帮助深表感谢!

twlwen 回答:使用JavaScript设置tinyMCE文本数据

我认为它将起作用

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

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

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

可以进行手动DOM遍历,但是依赖TinyMCE注入的HTML ...如果这种更改以某种方式可能会破坏基于DOM的代码。使用API​​可确保您不会随着时间的流逝而损坏。

,

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

本文链接:https://www.f2er.com/3150300.html

大家都在问