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