tinymce - 如何访问 TinyMCE 5 URL 对话框中的输入字段
问题描述
我正在将 TinyMCE 3 安装移植到版本 5。我设置了一个工具栏按钮,该按钮打开一个包含自定义页面的对话框,因此使用新windowManager.openUrl
方法加载。我也有一些页脚按钮,当然还有一个onAction( dialogApi, details )
在单击按钮时调用的处理程序。details.name
包含被单击的按钮的名称,因此我可以单独对每次单击做出反应。
似乎,当使用常规对话框时,我配置文件中的每个输入字段并通过传入我的处理程序的第一个参数plugin.js
的方法检索其值。此方法在我的URL 对话框中不存在。getData
onAction
dialogApi
我的 iframe/dialog 包含一个下拉列表,我想在单击对话框页脚按钮时将所选值插入到编辑器实例中。我知道我可以postMessage
用来将信息从 iframe 发送到插件,但这不是我想要的。
当单击按钮并通过打开我的对话框时,如何访问对话框中的输入字段openUrl
?如何访问对话框 iframe 中的文档?this
似乎是我传入的 JavaScript 对象openUrl
。document
是嵌入编辑器的页面。
解决方案
我做了一个演示,展示了从 iframe 对话框中的用户输入获取数据的两种不同方法: https ://codesandbox.io/embed/tinymce-dialog-openurl-demo-fpfew
这篇博文也是在 TinyMCE 中使用 iframe 对话框的绝佳资源: https ://www.martyfriedel.com/blog/tinymce-5-url-dialog-component-and-window-messaging
我的演示中的第一种方法使用 iframe 本身的 HTML 中的按钮。该按钮收集用户数据并用于postMessage
将该数据发送回 TinyMCE 编辑器。
如您所见,与“in iframe”按钮相比,使用页脚按钮的过程稍微复杂一些。本质上,页脚按钮会在对话框中向 iframe 发送一条消息,要求 iframe 收集用户数据并将其插入 TinyMCE。
使用 iframe 时,您必须遵守浏览器安全策略,因此大多数情况下您不能直接与 iframe 交互(如果 iframe 使用相同的域则例外)。以下是有关 iframe 安全策略的更多信息:
这也意味着 TinyMCE 无法像使用 TinyMCE 对话框那样知道 iframe 中的内容,因此需要“手动”获取数据。考虑到这一点,如果它是跨源请求(不同域),则无法在不使用postMessage
.
提到的getData
方法适用于 TinyMCE 对话框,因为对话框中的所有内容都是 TinyMCE 组件。TinyMCE 组件有一个自定义的值/状态概念,getData
可以访问返回数据。
当您使用 URL 对话框时,该对话框不再使用 TinyMCE 组件,因此它无法为 收集数据getData
,因此该方法不存在。这就是为什么您必须从 URL 对话框中的任何元素手动获取所需的数据,并使用postMessage
.
推荐阅读
- c++ - 在 C++ 中创建类 const 与 const 引用的成员函数有什么区别?
- assembly - MIPS数转换
- python - 无法使用 tkinter 将我的数据添加到 mysql
- javascript - 将 ES6 模块与 RequireJS 一起使用
- java - Maven 导入问题,在编译时里程碑版本正在使用,但在运行时最新的 RELEASE 版本正在使用
- android - 远程更改 recyclerView firebase 实时数据库中的视图类型
- php - 如何在 Spatie Laravel 备份中仅保存 5 个最近的备份?
- c++ - cplex c ++中的集合、子集和索引
- reactjs - Expo:React Native 仅在手机上引发 JSON 解析错误
- c - 退出程序时出现 free() 错误和 munmap_chunk 错误