如何访问 TinyMCE 5 URL 对话框中的输入字段
How to access input field in TinyMCE 5 URL dialog
我正在将 TinyMCE 3 安装移植到版本 5。我设置了一个工具栏按钮，用于打开一个包含自定义页面的对话框，因此使用新的 windowManager.openUrl 方法加载。我也有一些页脚按钮，当然还有单击按钮时调用的 onAction( dialogApi, details ) 处理程序。 details.name 包含被点击的按钮的名称，因此我可以对每次点击分别做出反应。
似乎，当使用常规对话框时，我在我的 plugin.js 文件中配置每个输入字段，并通过传入我的 [=] 的第一个参数的 getData 方法检索其值16=] 处理程序。对于 URL dialog.
我的 dialogApi 中不存在此方法
我的 iframe/dialog 包含一个下拉列表，我想在单击对话框页脚按钮时将选定的值插入到编辑器实例中。我知道我可以使用 postMessage 将信息从 iframe 发送到插件，但这不是我想要的。
单击按钮并通过 openUrl 打开对话框时，如何访问对话框中的输入字段？如何访问对话框的 iframe 中的文档？ this 似乎是我传入 openUrl 的 JavaScript 对象。 document 是嵌入编辑器的页面。
我制作了一个演示，展示了从 iframe 对话框中的用户输入获取数据的两种不同方式：
https://codesandbox.io/embed/tinymce-dialog-openurl-demo-fpfew
此博客 post 也是在 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 中的内容，因此需要获取数据 "manually"。考虑到这一点，如果它是跨源请求（不同的域），则不使用 postMessage.
就无法访问 iframe 内容
提到的 getData 方法适用于 TinyMCE 对话框，因为对话框中的所有内容都是 TinyMCE 组件。 TinyMCE 组件有一个自定义概念 values/states，getData 可以访问 return 数据。
当您使用 URL 对话框时，该对话框不再使用 TinyMCE 组件，因此它无法收集 getData 的数据，因此该方法不存在。这就是为什么你必须手动从 URL 对话框中的任何元素中获取所需的数据，然后使用 postMessage.
将它们发送回 TinyMCE
我正在将 TinyMCE 3 安装移植到版本 5。我设置了一个工具栏按钮，用于打开一个包含自定义页面的对话框，因此使用新的 windowManager.openUrl 方法加载。我也有一些页脚按钮，当然还有单击按钮时调用的 onAction( dialogApi, details ) 处理程序。 details.name 包含被点击的按钮的名称，因此我可以对每次点击分别做出反应。
似乎，当使用常规对话框时，我在我的 plugin.js 文件中配置每个输入字段，并通过传入我的 [=] 的第一个参数的 getData 方法检索其值16=] 处理程序。对于 URL dialog.
dialogApi 中不存在此方法
我的 iframe/dialog 包含一个下拉列表，我想在单击对话框页脚按钮时将选定的值插入到编辑器实例中。我知道我可以使用 postMessage 将信息从 iframe 发送到插件，但这不是我想要的。
单击按钮并通过 openUrl 打开对话框时，如何访问对话框中的输入字段？如何访问对话框的 iframe 中的文档？ this 似乎是我传入 openUrl 的 JavaScript 对象。 document 是嵌入编辑器的页面。
我制作了一个演示，展示了从 iframe 对话框中的用户输入获取数据的两种不同方式： https://codesandbox.io/embed/tinymce-dialog-openurl-demo-fpfew
此博客 post 也是在 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 中的内容，因此需要获取数据 "manually"。考虑到这一点，如果它是跨源请求（不同的域），则不使用 postMessage.
提到的 getData 方法适用于 TinyMCE 对话框，因为对话框中的所有内容都是 TinyMCE 组件。 TinyMCE 组件有一个自定义概念 values/states，getData 可以访问 return 数据。
当您使用 URL 对话框时，该对话框不再使用 TinyMCE 组件，因此它无法收集 getData 的数据，因此该方法不存在。这就是为什么你必须手动从 URL 对话框中的任何元素中获取所需的数据，然后使用 postMessage.