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

JavaScript: Translate WYSIWIG Editor changes to a live site into jQuery actions

本文关键字：转换 操作 jQuery 站点 所见即所得 编辑器 实时 JavaScript      更新时间：2023-09-26

上下文

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

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

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

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

问题

我找到了以下所见即所得的编辑器，它似乎适用于此编辑部分： https://www.froala.com/wysiwyg-editor/docs - 但是，有两件我不确定：

  1. 如果我在站点中加载它，我可以使用它，但我不确定如何在第三方站点上使用它（例如，像 Chrome Dev Tools 所做的那样）。
  2. 我不确定如何将所做的更改转换为jQuery选择器和值。

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

对于有相同问题的人，我找到了两种解决此问题的方法：

    JS片段
  1. ：如果第三方站点中有JS片段，可以使用postMessage方法与之通信。更多关于这里的信息： https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
  2. 无JS代码段：如果第三方站点中没有JS代码段，则可以使用代理将站点加载到iframe中。代理充当中间人，允许您在将代码加载到 iframe 之前将代码注入站点。这里清楚地描述了过程：代理一个网站以便能够在 iframe 中 WYSIWYG 编辑 - 它是如何工作的？
相关文章：