codemirror文本比对呈现效果不太准确的问题

最近公司有个文本比对的功能模块，于是在网上找了几个文本比对的js插件，一开始用的是vue-code-diff，但是但文本数据比较大的时候，会发生卡顿，甚至网页奔溃，后面使用codemirror，这个性能比较好，但是比对的呈现效果不太好，例如我另外一个文本中间新增了一行

 可以看到红色波浪线并不是在我新增的这行，而是连带了上面一行的末尾部分，这个效果并不是我想要的，于是去找文档，发现codemirror的比对是源于google diff-match-patch插件的，调用的是diff-match-patch的diff_main方法，这个比对结果不一定对用户友好，所以我们可以使用diff-match-patch里的diff_cleanupSemantic方法对diff_main的比对结果进行优化。

1、codemirror和diff-match-patch的使用

首先我们安装两个插件

npm install --save codemirror
npm install --save diff-match-patch

然后在你比对的页面引入

然后定义一个元素

 

 最后初始化

可以调用实例方法进行更新值

这样效果就出来了

 

2、优化比对结果

上面的比对效果并不是我们想要的，所以可以进行优化，我这边选择的是改动源码

找到node_modules里的codemirror文件夹，然后找到引入的codemirror/addon/merge/merge.js文件，找到下面图片地方，添加如下代码

再找到node_modules下的diff-match-patch的index.js，在diff_cleanupSemantic方法的最后面，把结果return出去

 这样，效果就变了

注意：当然，我们改过源码的话，就可以把node_modules里的两个插件拿出来当本地静态资源引入，把codemirror和diff-match-patch文件夹放到同一个文件夹路径下，然后修改merge.js里的 diff-match-patch引入路径

 

第一次发表，不对的地方，还请各位大佬多多指教