前端 diff 文本 - mergely

介绍

需要前端展示文本编辑历史, 并做 diff. 
找了三个库, 分别是: CodeMirror, DiffMatchPatch, Mergely 
CodeMirror 效果不是很好, DiffMatchPatch 是 Google 开发的, 感觉实现后效果同样不好.最后选用了 Mergely.

实际上, Mergely 用到了 CodeMirror, 而 CodeMirror 用到了 DiffMatchPatch.

先上最终效果图 

CodeMirror

CodeMirror 和 DiffMatchPatch 这里不做过多介绍. 有兴趣可以试试. 
CodeMirror Github: https://github.com/codemirror/CodeMirror 
CodeMirror Demo: http://codemirror.net/demo/merge.html

DiffMatchPatch

DiffMatchPatch Github: https://github.com/google/diff-match-patch 
DiffMatchPatch Diff Demo: https://neil.fraser.name/software/diff_match_patch/demos/diff.html 
DiffMatchPatch Match Demo: https://neil.fraser.name/software/diff_match_patch/demos/match.html 
DiffMatchPatch Patch Demo: https://neil.fraser.name/software/diff_match_patch/demos/patch.html

Mergely

官网地址: http://www.mergely.com/ 
Github: https://github.com/wickedest/Mergely 
Demo 1: https://jsfiddle.net/bilgehansolo/142r02ny/ 
Demo 2: https://codepen.io/Sphinxxxx/pen/grVvjG

示例

    
    
    
    
    
    
    
    
    
    



    

        
Diff Demo