JavaScript：将 WYSIWIG 编辑器对实时站点的更改转换为 jQuery 操作
JavaScript: Translate WYSIWIG Editor changes to a live site into jQuery actions
语境
作为 Meteor.JS 应用程序的一部分，我需要创建一个允许用户执行以下操作的可视化编辑器：
- 输入实时网站的 URL（可以是任何网站，不需要 JS 代码段）
- 在应用内的 iframe/wysiwyg 编辑器中查看网站
- Select text/images 在此网页中并以视觉方式更改其内容
在后端，我需要将上面的动作翻译成两部分：
- 一个 jQuery 选择器告诉我哪个元素已更改
- 表示新的值 text/image url.
问题
我发现以下 WYSIWYG 编辑器似乎适用于此编辑部分：https://www.froala.com/wysiwyg-editor/docs - 但是，有两部分我不确定：
- 如果我在网站中加载它，我可以使用它，但我不确定如何在第三方网站上使用它（例如 Chrome Dev Tools 所做的）。
- 我不确定如何将所做的更改转换为 jQuery 选择器和值。
如果能深入了解这个问题的任何一部分，我们将不胜感激。
对于有同样问题的人，我找到了两种解决这个问题的方法：
- JS Snippet：如果第三方站点有JS Snippet，可以使用postMessage方式与之通信。更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
- No JS Snippet：如果第三方站点没有JS Snippet，可以使用代理将站点加载到iframe中。代理充当中间人，允许您在网站加载到您的 iframe 之前将代码注入网站。过程在这里描述得很清楚：
语境
作为 Meteor.JS 应用程序的一部分，我需要创建一个允许用户执行以下操作的可视化编辑器：
- 输入实时网站的 URL（可以是任何网站，不需要 JS 代码段）
- 在应用内的 iframe/wysiwyg 编辑器中查看网站
- Select text/images 在此网页中并以视觉方式更改其内容
在后端，我需要将上面的动作翻译成两部分：
- 一个 jQuery 选择器告诉我哪个元素已更改
- 表示新的值 text/image url.
问题
我发现以下 WYSIWYG 编辑器似乎适用于此编辑部分：https://www.froala.com/wysiwyg-editor/docs - 但是，有两部分我不确定：
- 如果我在网站中加载它，我可以使用它，但我不确定如何在第三方网站上使用它（例如 Chrome Dev Tools 所做的）。
- 我不确定如何将所做的更改转换为 jQuery 选择器和值。
如果能深入了解这个问题的任何一部分，我们将不胜感激。
对于有同样问题的人，我找到了两种解决这个问题的方法：
- JS Snippet：如果第三方站点有JS Snippet，可以使用postMessage方式与之通信。更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
- No JS Snippet：如果第三方站点没有JS Snippet，可以使用代理将站点加载到iframe中。代理充当中间人，允许您在网站加载到您的 iframe 之前将代码注入网站。过程在这里描述得很清楚：