JavaScript：将WYSIWIG编辑器更改为实时站点转换为jQuery操作

Question

CONTEXT

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

1. 输入实际网站的网址（可以是任何网站，不需要JS代码段）
2. 在应用
中的iframe / wysiwyg编辑器中查看该网站
3. 在此网页中选择文字/图片并直观地更改其内容

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

1. 一个jQuery选择器，告诉我哪个元素已被更改
2. 表示新文字/图片网址的值。

问题

我发现以下WYSIWYG编辑器似乎适用于编辑部分：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代码段：如果第三方网站中没有JS代码段，您可以使用代理将网站加载到iframe中。代理充当中间人，允许您在将代码加载到iframe之前将代码注入网站。这里清楚地描述了流程：Proxying a site to be able to WYSIWYG edit in iframe - How does it work?