vue 文本比較插件

• 首先安裝插件：codemirror、diff-match-patch
• HTML部分：
•  <div id="view"></div>

 

import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/merge/merge.js'
import 'codemirror/addon/merge/merge.css'
import DiffMatchPatch from 'diff-match-patch'
window.diff_match_patch = DiffMatchPatch
window.DIFF_DELETE = -1
window.DIFF_INSERT = 1
window.DIFF_EQUAL = 0
 
 
// 定義對比方法
methods:
initUI(value,orig2) {
        if (value == null) return;
        let target = document.getElementById("view");
        target.innerHTML = "";
        CodeMirror.MergeView(target, {
          value: value,//上次內容
          origLeft: null,
          orig: orig2,//本次內容
          lineNumbers: true,//顯示行號
          mode: "text/html",
          highlightDifferences: true,
          connect: 'align',
          readOnly: true,//只讀 不可修改
        });
      }

 

 

 

初始化編譯器時可設置屬性：

value:初始內容
Mode:設置編譯器編程語言關聯內容，對應的mine值
Theme:編譯器的主題，需要引入對應的包
tabSize：tab的空格寬度
lineNumbers：是否使用行號
smartIndent：自動縮進是否開啟
indentUnit：縮進單位
keyMap：快捷鍵，default使用默認快捷鍵，除此之外包括emacs，sublime，vim快捷鍵，使用需引入工具