codeMirror是一个很强大的代码编辑器，其中的mergeView方法可以进行代码的对比

官网地址：https://codemirror.net/
gitHub地址：https://github.com/codemirror/CodeMirror
参考：https://www.jianshu.com/p/2ba3cf5057c6

使用

1.下载codemirror

npm install codemirror

2,在需要使用的页面引入codeMirror。我一般是封装成一个组件，需要用的时候直接引入即可

import CodeMirror from 'codemirror';//引入codeMirror
import 'codemirror/addon/merge/merge.css';//引入codeMirror样式

3，依赖

依赖地址：https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js
import './diff_match_patch';//codeMirror的比对是依赖于google的这个插件来实现的，但是在codeMirror底层并没有这个插件，所以要自行引入，我这里是下载到了本地之后再引入的

4，对比（如果要实现对比功能，必须引入下面两个文件）

import 'codemirror/addon/merge/merge.css';
import 'codemirror/addon/merge/merge.js';

5，mode

import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/xml/xml'
import 'codemirror/mode/python/python'
import 'codemirror/mode/markdown/markdown'
。。。。。

6.fold

import "codemirror/addon/fold/foldgutter.css"
import "codemirror/addon/fold/foldcode"
import "codemirror/addon/fold/brace-fold"//折叠js
import "codemirror/addon/fold/xml-fold"//折叠xml和html
import "codemirror/addon/fold/markdown-fold"//折叠md
import "codemirror/addon/fold/comment-fold"//折叠注释，但是测试一下只能折叠html的注释；

7.active-line

import "codemirror/addon/selection/active-line"

5，代码比对插件就完成了最基础的文件引入，下一步是在react中使用

class CodeMirrors extends Component{
  constructor(props) {
    super(props);
      this.state= {
        FileContentData: props.FileContentData,
      }
  }
  componentDidMount(){
    const {FileContentData} = this.props
      this.initUI(FileContentData)
  }
  initUI(data) {
    var target = this.refs['react-diff-code-view'];//获取dom元素
    console.log(target)
    target.innerHTML = "";//每次dom元素的内容清空
    CodeMirror.MergeView(target, Object.assign({}, {
      readOnly: true,//只读
      lineNumbers: true, // 显示行号
   	  theme: 'eclipse', //设置主题
      value: data.lhContent,//左边的内容（新内容）
      orig: data.rhContent,//右边的内容（旧内容）
      mode: "javascript",//代码模式为js模式，这里还可以是xml，python，java，等等，会根据不同代码模式实现代码高亮
      highlightDifferences: "highlight",//有差异的地方是否高亮
      connect: null,
      revertButtons: false,//revert按钮设置为true可以回滚
      styleActiveLine: true,//光标所在的位置代码高亮
      lineWrap:true,// 文字过长时，是换行(wrap)还是滚动(scroll),默认是滚动
    smartIndent: true, // 智能缩进
      matchBrackets: true, // 括号匹配
      foldGutter:true,//代码折叠
      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    // 智能提示
    extraKeys：{
        "Alt-/": "autocomplete", "F11": function (cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        }
    }
    }, this.props.options || {}));
  }
  render(){
    return (
      <div className="react-diff-code-view" style={{height: '100%'}}>
        <div ref="react-diff-code-view" style={{height: '100%'}</div>
      </div>
    )
  }
}
export default CodeMirrors;

bug1：当这个组件在另外一个页面使用时，由于reder会执行两次，一次是旧的state，一次是新的state，但是codeMirror组件的componentDidMount只执行一次就必须想办法在别的生命周期函数里面去执行initUI函数，以获取最新的数据

  componentWillReceiveProps(nextProps){
      this.initUI(nextProps.FileContentData);
  }

bug2：很多同学下载完codeMirror之后根本找不到mergeView这个方法，原因是下载工具npm或者是tnpm/cnpm不稳定，你的node_modules包根本就没有下载好，重新npm下载或者直接把整个codeMirror的文件downLoad到本地，放在lib里面

对比图基本如下

tip1：修改有差异的背景颜色

  .CodeMirror-merge-r-chunk { background: rgba(30,144,255,0.5); }
  .CodeMirror-merge-r-chunk-start { border-top: 1px solid dodgerblue; }
  .CodeMirror-merge-r-chunk-end { border-bottom: 1px solid dodgerblue; }
  .CodeMirror-merge-r-connect { fill: rgba(30,144,255,0.5); stroke: rgba(30,144,255,0.5); stroke-width: 1px; }

  .CodeMirror-merge-l-chunk { background: rgba(30,144,255,0.5); }
  .CodeMirror-merge-l-chunk-start { border-top: 1px solid dodgerblue; }
  .CodeMirror-merge-l-chunk-end { border-bottom: 1px solid dodgerblue; }
  .CodeMirror-merge-l-connect { fill: rgba(30,144,255,0.5); stroke: rgba(30,144,255,0.5); stroke-width: 1px; }

  .CodeMirror-merge-l-chunk { background: rgba(30,144,255,0.5); }
  .CodeMirror-merge-r-chunk { background: rgba(30,144,255,0.5); }
  .CodeMirror-merge-l-chunk-start { border-top: 1px solid dodgerblue; }
  .CodeMirror-merge-r-chunk-start { border-top: 1px solid dodgerblue; }
  .CodeMirror-merge-l-chunk-end { border-bottom: 1px solid dodgerblue; }
  .CodeMirror-merge-r-chunk-end { border-bottom: 1px solid dodgerblue; }