codeMirror的簡單使用，js比較文本差異（標注出增刪改）

最近項目需要使用比較文本的差異的功能，在同事的推薦下，使用js腳本來比較，所以codeMirror變成了選擇。

當然codeMirror中有其他功能，比較文本差異的只是其中一個功能，本人不在此做介紹，有興趣的可以登錄他的官網

http://codemirror.net/ 進行詳細了解。

第一步：下載codeMirror的jar包，下載地址在上面提到的官網，本人使用的是codemirror-4.11這個版本。

第二步：在頁面引入它css樣式和js文件

其中diff_math_patch.js可能所下載的包里沒有，所以要自行下載，

<script src="//cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>

這是它原來的路徑，如果實在找不到，發郵件聯系我。

第三步：下面是div和關鍵性的js腳本。

<div id=view></div>

<script type="text/javascript">
var value, orig1, orig2, dv, panes = 2, highlight = true, connect = null, collapse = false;
function initUI() {
  if (value == null) return;
  var target = document.getElementById("view");
  target.innerHTML = "";
  dv = CodeMirror.MergeView(target, {
    value: value,
    origLeft: panes == 3 && !collapse && !connect ? orig1 : null,
    orig: orig2,
    lineNumbers: true,
    mode: "text/html",
    highlightDifferences: highlight,
    connect: connect,
    collapseIdentical: collapse
  });
}

function toggleDifferences() {
  dv.setShowDifferences(highlight = !highlight);
}

window.onload = function() {
     value='Leftssss\nsssdfd\nsdf\nsdf\nsdsdss\naaasdf\nsdfsd\nbbb\nnaaddddddddddddddddddddddddddddddddddddddd\nadssa\nasdas\nasdf\nssss\ndddd\nffff\nccc\naaa\nzzzz\nsss\nbbb\nfff\nvvv\n\ndfddd\nsss\nzzz\noooo\nppp\nyyy\ncccc\nssss\nhhhh\nssss';
    orig1 = 'Leftssss\nsssdfd\nsdf\nsdf\nsdsdss\naaasdf\nsdfsd\nbbb\naaddddddddddddddddddddddddddddddddddddddda\nadssa\nasdas\nasdf\nssss\ndddd\nffff\nccc\naaa\nzzzz\nsss\nbbb\nfff\nvvv\n\ndfddd\nsss\nzzz\noooo\nppp\nyyyncccc\nssss\nhhhh\nsass';
    orig2='Rightssss\nsssdfd\nsdf\nsdf\nsdsdss\naas\nsdfsd\nbbb\naaa\nadssa\nasdddddddddddddddddddddddddddddddddddddddddddas\nasdf\nsdd\ndffd\nffdg\nccc\naaa\nzzzz\nsss\nbbb\nfff\nvvv\n\ndfddd\nsss\nzs\noodf\nppfdgp\nyyyndfgcc\nssdfgdss\nhhssssh\nsdfgdfg';
  initUI();
};

function mergeViewHeight(mergeView) {
  function editorHeight(editor) {
    if (!editor) return 0;
    return editor.getScrollInfo().height;
  }
  return Math.max(editorHeight(mergeView.leftOriginal()),
                  editorHeight(mergeView.editor()),
                  editorHeight(mergeView.rightOriginal()));
}

function resize(mergeView) {
  var height = mergeViewHeight(mergeView);
  for(;;) {
    if (mergeView.leftOriginal())
      mergeView.leftOriginal().setSize(null, height);
    mergeView.editor().setSize(null, height);
    if (mergeView.rightOriginal())
      mergeView.rightOriginal().setSize(null, height);

    var newHeight = mergeViewHeight(mergeView);
    if (newHeight >= height) break;
    else height = newHeight;
  }
  mergeView.wrap.style.height = height + "px";
}
</script>

效果圖：

效果圖中，左邊為原來的文本，右邊是比較后的，有差異的腳本會自動標出，兩邊可以一起上下左右移動。

js中 value 等為本人測試數據隨便寫的，代碼是基本上是demo里的，大家在使用的時候只要注意，window.onload里的value，和 orig1，orig2的賦值就行了，換成你想要比較的的兩個文本。

如果有不好的地方，歡迎請大家批評和指正。

如若轉載請標明出處。