如何从 iframe 中的 TinyMCE 实例获取内容答案

【问题标题】：How to get content from a TinyMCE instance within an iframe如何从 iframe 中的 TinyMCE 实例获取内容
【发布时间】：2020-02-28 11:47:18
【问题描述】：

我有一个 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 独立于主页。

【问题讨论】：

tinymce 应该是 iframe 的全局 window 对象的全局属性。要访问它，您只需执行$("#iframe")[0].contentWindow.tinymce。然后，获取编辑器的内容 （未测试，因为我没有访问 v5，但可以在 v4 中使用）：$("#iframe")[0].contentWindow.tinymce.editors["input-id"].getContent() （将 input-id 替换为您的 textarea 的 ID )
谢谢！它很有魅力。您也帮助我了解了如何在 iframe 中使用 javascript，只需几行代码。您能否将其发布为答案以便我接受？

【解决方案1】：

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

当该页面位于 iframe 中时，要从父级访问此 window，您可以：

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

一旦您了解了这一点，就很容易访问 TinyMCE 编辑器的内容：

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

【讨论】：