react中使用codeMirror之代码对比方法：codeMirror.mergeView()

本文主要是介绍react中使用codeMirror之代码对比方法：codeMirror.mergeView()，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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.propsthis.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; }