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