javascript - 如何从 iframe 内的 TinyMCE 实例获取内容

标签 javascript tinymce tinymce-5

我有一个 TinyMCE (v5) 实例,它位于 iframe 本身内部。但是,我希望当我在父页面中提交表单时包含其内容。由于其内容不会自动添加到 POST 数据中,因此我尝试拦截表单提交,将 TinyMCE 实例的内容复制到 iframe 之外的隐藏字段,然后继续提交。

但是,我在访问 iframe 内的 TinyMCE 实例时遇到问题。

我设法通过这种方式访问​​ iframe 的内容: $('#iframe').contents().find('[name="input"]')

我知道要获取 TinyMCE 实例的内容,我们应该使用 getContent()。 但是,我无法从 iframe 外部获取 TinyMCE 实例。

我还尝试使用 target 选项而不是 selector 从 iframe 外部(即从父页面)初始化 TinyMCE,但在这种情况下,TinyMCE 不会甚至无法正确初始化。

有没有办法获取iframe的TinyMCE实例?将其保留在 iframe 中对我来说很重要,因为我希望编辑器的 CSS 独立于主页的 CSS。

最佳答案

当您将 TinyMCE 包含到页面中时,它会将 tinymce 变量注册到该页面的窗口,以便您可以访问它并设置编辑器。

当该页面位于 iframe 内时,要从父级访问此窗口,您可以执行以下操作:

$('#iframe')[0].contentWindow;
// or `document.querySelector('#iframe).contentWindow` in plain JS

一旦您了解了这一点,就可以轻松访问 TinyMCE 编辑器的内容:

$("#iframe")[0].contentWindow.tinymce.editors["input-id"].getContent();

关于javascript - 如何从 iframe 内的 TinyMCE 实例获取内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60451091/

相关文章:

javascript - 使用 momentJS 确定任意时区中指定日期的星期几

javascript - 鼠标按下。在 sibling event.targets 上传播

javascript - 如何在 ES6 中创建主导入文件?

上传图片时出现 Javascript 错误 TinyMCE

javascript - 未捕获的语法错误 : Unexpected token if

javascript - 将TinyMCE字符映射插件与多个配置一起使用

javascript - 将 redis 与 node.js 一起使用时无法获取有效列表

javascript - tinymce:在左侧对齐对话框窗口的页脚按钮?

javascript - 如何将自定义按钮和对话框迁移到 TinyMCE 5

tinymce - 如何更新tinymce编辑器的color_map