JavaScript:将所见即所得编辑器对实时站点的更改转换为 jQuery 操作

Question

上下文

作为 Meteor.JS 应用程序的一部分，我需要创建一个可视化编辑器，允许用户执行以下操作:

1. 输入实时网站的 URL(可以是任何网站，无需 JS 代码段)
2. 在应用内的 iframe/所见即所得编辑器中查看网站
3. 选择该网页中的文本/图像并直观地更改其内容

在后端，我需要将上述操作转换为两部分:

1. 一个 jQuery 选择器告诉我哪个元素已更改
2. 指示新文本/图像网址的值。

问题

我发现以下所见即所得编辑器似乎非常适合此内容的编辑部分:https://www.froala.com/wysiwyg-editor/docs - 但是，有两点我不确定:

1. 如果我在网站中加载此插件，我就可以使用它，但我不确定如何在第三方网站上使用它(例如 Chrome 开发工具)。
2. 我不确定如何将所做的更改转换为 jQuery 选择器和值。

对这个问题的任何一个部分的任何见解将不胜感激。

Answer 1

对于有同样问题的人，我找到了两种方法来解决这个问题:

1. JS Snippet:如果第三方网站有JS Snippet，您可以使用postMessage方法与之通信。更多信息请参见:https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
2. 无 JS Snippet:如果第三方网站没有 JS Snippet，您可以使用代理将网站加载到 iframe 中。代理充当中间人，允许您在将代码加载到 iframe 之前将代码注入(inject)到网站中。这里清楚地描述了过程:Proxying a site to be able to WYSIWYG edit in iframe - How does it work?