浏览器端可导出变更的可视化HTML编辑器及变更重应用方法咨询

无依赖编辑器实现思路 #

可以直接基于浏览器原生API实现符合要求的编辑器，完全不需要引入第三方CSS/JS框架：

• 初始内容加载：通过fetch拉取目标URL的HTML内容，解析提取页面内引用的CSS、JS资源路径，全部注入到编辑器的独立iframe沙箱中，保证渲染效果和原页面完全一致
• 编辑能力：给iframe的body开启contenteditable属性，即可直接获得原生的所见即所得编辑能力，不需要额外封装复杂的交互逻辑
• 视图切换：默认展示iframe的可视化编辑视图，切换代码视图时直接将iframe的DOM序列化为纯HTML字符串展示，用户修改代码后同步回iframe重新渲染即可

替代文本Diff的修改记录方案 #

以下两种方案生成的修改记录体积更小、还原准确率更高，完全不需要做纯文本Diff：

1. 操作指令序列记录法 #

编辑器初始化阶段为所有DOM节点生成唯一的稳定标识符（可通过节点在DOM树中的路径生成，例如body>div.container>p:nth-child(3)），通过MutationObserver监听iframe内的所有DOM变更，每一次用户操作都会被记录为结构化的指令对象：

// 示例指令格式
[
  {"type": "modify", "target": "节点标识", "field": "innerHTML", "newValue": "修改后的内容"},
  {"type": "style", "target": "节点标识", "prop": "font-size", "value": "16px"},
  {"type": "add", "parent": "父节点标识", "position": "after", "content": "<span>新增节点内容</span>"}
]

导出时直接将指令序列导出为JSON文件，还原时只需在原始页面的DOM上按顺序执行所有指令即可，还原速度极快，不会受原始页面属性顺序、格式化等无关变动的影响。

2. 结构化DOM差分补丁法 #

每次用户完成修改后，将当前DOM树和初始DOM树做结构化比对，直接生成两个DOM树的差异补丁，而非对HTML文本做Diff。你可以直接用RFC 6902标准的JSON补丁格式存储差异，也可以自定义更贴合DOM操作的补丁格式。这种方法比纯文本Diff的匹配准确率高很多，不会因为HTML代码的无关格式变动产生无效差异。

内容的提问来源于stack exchange，提问作者Erce