codemirror插件-文件比较组件merge

目的： 为了实现文件比较功能

引用文件

从github下载项目后，从以下路径引用文件，其中部分github分支中codemirror.js 需要运行项目，自动合成

<link rel=stylesheet href="../lib/codemirror.css">
<link rel=stylesheet href="../addon/merge/merge.css">
<script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
<script src="../addon/merge/merge.js"></script>

配置参数 

笔者在merge.js的 CodeMirror中注册了如下方法

 var value, orig1, orig2, dv, panes = 2, highlight = true, connect = null, collapse = false;
  CodeMirror.k_init=function(id,newData,oldData){
    value=oldData;//左侧 老文件
    orig1 = '';
    orig2=newData;//右侧 新文件
    initUI();

    function initUI() {
      if (value == null) return;
      var target = document.getElementById(id);
      target.innerHTML = "";
      var dv = CodeMirror.MergeView(target, {
        value: value,
        origLeft: panes == 3 && !collapse && !connect ? orig1 : null,
        orig: orig2,
        lineNumbers: true, //行号
        mode: "text/html",
        //theme:'3024-night',//修改主题
        styleActiveLine: true,
        matchBrackets: true,
        highlightDifferences: highlight,
        connect: connect,
        collapseIdentical: collapse,
        revertButtons:false,//事件比较替换
      });
    }
  };

 然后在外部js中直接调用 

CodeMirror.k_init('codeMirror',jsonString.now_file_content,jsonString.old_file_content)

效果如下

单个文件查看

  CodeMirror.k_show=function(id,Data){
    value=Data;//左侧 老文件
    initUI();
    function initUI() {
      if (value == null) return;
      var target = document.getElementById(id);
      target.innerHTML = "";
      var dv = CodeMirror(document.getElementById(id), {
        value: value,
        lineNumbers: true,
        mode: "text/html",
        //theme:'3024-night',
        styleActiveLine: true,
        matchBrackets: true,
      });
    }
  };

CodeMirror.k_show('codeMirror',jsonString.now_file_content)

效果如下

配置心得：

1）修改主题

引用 codemirror源码中theme文件下的css,添加配置theme,例 theme:'3024-night'； //修改主题

2）修改不同部分背景颜色

若行内容不用，dom结构会有所不同，故我直接修改css,  兄弟选择器确定元素

.CodeMirror-merge-r-chunk+.CodeMirror-gutter-wrapper+.CodeMirror-line {
  background-color: #888;
}
.CodeMirror-merge-r-chunk+.CodeMirror-gutter-wrapper+.CodeMirror-line span {
  background-image: none;
}

3）高度修改

修改merge.css ，

.CodeMirror-merge, .CodeMirror-merge .CodeMirror {
  height: 600px;
}

4）revertButtons参数 关闭中间替换事件，隐藏替换按钮

http://codemirror.net/demo/merge.html