CodeMirror.MergeView

最近項目上需要實現2個文本的比較展示功能，找了一圈發現CodeMirror.MergeView 自帶這個功能，其實裏面用的diff插件是Google的diff-match-patch，在github的星星還蠻多，就用選擇這個插件了。

下面寫個demo以便備忘。

安裝依賴

npm install codemirror
npm install diff-match-patch

完整代碼

<template>
  <div id="view"></div>
</template>

<script>
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

export default {
  name: 'Diff',
  mounted () {
    let value = 'abcc'
    let orig2 = 'abcd'
    this.initUI(value, orig2)
  },
  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',
        revertButtons: true, // 是否顯示還原按鈕
        readOnly: true// 只讀 不可修改
      })
    }
  }
}
</script>

<style scoped>

</style>

最終效果

---

工程代碼：https://github.com/clj198606061111/vue_itclj_demo/blob/master/src/components/Diff.vue