之前做的文本对比功能，使用google的文本对比算法，可以参考学习一下

功能：

文本合并对比；不一致提示；保存，编辑；撤回编辑；

使用react的codemirror

效果：

文本对比

<div ref={ref=>this._ref=ref} >

</div>

最关键的是引入算法文件diff_match_patch

需要的可以去下载：

也可以自行google

使用案例代码如下：

import CodeMirror from 'codemirror/lib/codemirror'

require('codemirror/lib/codemirror.css');

require('codemirror/theme/eclipse.css')

require('codemirror/theme/neat.css')

require('codemirror/addon/lint/lint.css')

require('codemirror/addon/merge/merge.css')

require('codemirror/mode/javascript/javascript')

require('codemirror/addon/lint/lint')

require('codemirror/addon/lint/javascript-lint')

require('codemirror/addon/merge/merge')

require('codemirror/addon/merge/diff_match_patch')

实现从后端获取文本内容展示

const dv = CodeMirror.MergeView(this._ref, {

height:2,

value: this.state.config_content,

origLeft: this.state.config_content,

origRight: null,

allowEditingOriginals: false,

lineNumbers: true,

mode: "xml",

highlightDifferences: true,

connect: 'align',

},

)

//编辑

dv.editor().on("change", function(cm, change, value) {

codevalueforall=dv.editor().getValue()

});

//调整显示高度

resizemergeView(dv);

function mergeViewHeight(mergeView) {

function editorHeight(editor) {

if (!editor) return 0;

return editor.getScrollInfo().height;

}

return Math.max(editorHeight(mergeView.leftOriginal()),

editorHeight(mergeView.editor()),

editorHeight(mergeView.rightOriginal()));

}

function resizemergeView(mergeView) {

var height = mergeViewHeight(mergeView)/2;

for(;;) {

if (mergeView.leftOriginal())

mergeView.leftOriginal().setSize(null, height);

mergeView.editor().setSize(null, height);

if (mergeView.rightOriginal())

mergeView.rightOriginal().setSize(null, height);

var newHeight = mergeViewHeight(mergeView);

if (newHeight >= height) break;

else height = newHeight;

}

mergeView.wrap.style.height = height + "px";

}

其中自适应高度挺重要的，否则使用时会很难适应