编辑器：如何查看历史痕迹？

您所在的位置：网站首页 › cad怎么查历史记录 › 编辑器：如何查看历史痕迹？

编辑器：如何查看历史痕迹？

2023-09-12 04:58| 来源: 网络整理| 查看: 265

一、前言

项目是一个后台管理系统，可供用户编写文章。需要查看历史痕迹。

二、前提后台模板用的是vue-element-admin,编辑器也是自带的Tinymce编辑器。需要下载Google的文件对比模板 google-diff-match-patch 。三、原理

根据后端记录的每次修改，将返回的数组数据循环，让前后两个数据两两比较，根据google-diff-match-patch可以将对比结果通过数组的形式返回，记录修改前与修改后的首尾下标，存到一个数组里，后续利用同样的方法，获取到数组数据之后可以跟上一个的得到的数组进行比对，或进行新增、删除、保持不变。

展示一下diff对比后返回的数组数据，如截图

说一下数组的每一项的含义：

graph TD 下标0 --> 0 --> 未修改 --> = 下标0 --> 1 --> 新增 --> + 下标0 --> -1 --> 删除--> - 下标1 --> 内容

这样我们就可以通过状态以及内容length来获取首尾index，然后就可以做上标记（不变、新增、删除）。

四、简单实现 1.获取前后数组数据

举个栗子：假如现在数据从12 -> 152再到152 -> 12

首先第一个图是从12 -> 152，对比左右的文本信息，根据google-diff-match-patch的对比情况可得数组

数组中下标为0的key代表增加（1）、删除（-1）、不变（0）数组中下标为1的key代表的是内容。

同理图2如下图

// list是google-diff-match-patch对比之后的数组 // leftIndex：修改前的下标，代表字符串执行到哪里 // rightIndex: 修改后的下标，代表字符串执行到哪里 // sp1：修改前的首下标， sp2：修改后的首下标， ep1：修改前的尾下标， ep2：修改后的尾下标 let leftIndex = 0 let rightindex = 0 let newArray = [] for(let i=0;i

【本文地址】

编辑器：如何查看历史痕迹？

编辑器：如何查看历史痕迹？

今日新闻

推荐新闻