vue-codemirror-merge插件的使用

需求:對代碼進行比較，並且提交修改后的代碼

安裝：npm install codemirror diff-match-patch --save

引入：

import CodeMirror from 'codemirror';

import "codemirror/theme/neat.css"; //主題css

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

我是在彈框中打開的，所以我在打開彈框的時候，執行js- diffCode

<div id="code-diff-box"></div>

components: {CodeMirror},
methods:{
      diffCode(){
            let target = document.getElementById("code-diff-box");
            target.innerHTML = "";
            let oldStr = this.formConfigFiles.content;
            this.Editor = CodeMirror.MergeView(target, {
                theme:"neat",
                value:oldStr,//配置文件內容 - 在右側
                origRight: null,
                orig: this.newStr,//編輯后返回內容 - 在左側
                lineNumbers: true,//顯示行號
                mode: "text/html",
                highlightDifferences: true,
                connect: 'align',
                readOnly: false,//只讀
            });
        },    
}

由於我需要左側是新返回的代碼（不可編輯），右側是數據庫中原始的code（可編輯），所以我對樣式進行調整 （原先是左側修改，右側不可編輯）

<style>
.CodeMirror-merge-right{
    left: 0px
}
.CodeMirror-merge-gap{
    left: 47%;
}
.CodeMirror-merge-editor{
    position: absolute;
    right: 0;
}
.CodeMirror-merge-copy{
    transform: rotateY(180deg); 
}
</style>

 

 

 最后要獲取編輯之后的內容，關鍵啊關鍵

仍然要使用codemirror中的方法，但是他是在隱藏的，找了好久

let newstr = this.Editor.edit.getValue();

newstr  - 最新的修改后的代碼；