在vue中使用CodeMirror創建XML編輯器經驗總結(一)

　　使用codemirror做完項目一段時間了，來進行一個功能總結，希望能幫助到小伙伴們。編輯器包括基礎功能代碼提示、格式化、搜索替換、變量跳轉，代碼字體放大縮小，注釋等，自定義功能包括在編輯器中查看圖片，插入自定義代碼塊，代碼實時高亮等。由於篇幅太長，本篇介紹代碼提示，格式化，搜索替換功能。其它的功能依次見下篇文章~

　　1）基礎的引入　

• html代碼

<textarea ref="code"></textarea>

• javascript代碼

const CodeMirror = require("codemirror/lib/codemirror"); // 后續要使用CodeMIrror，故使用require方式引入
import "codemirror/lib/codemirror.css";
import "codemirror/mode/xml/xml"; // xml編輯器模式
import "codemirror/theme/monokai.css"; // 主題
this.editor = CodeMirror.fromTextArea(this.$refs.code, {
    mode: "application/xml",
    lineNumbers: true, // 顯示行號
    styleActiveLine: true,  // 高亮當前行
     theme: "monokai",  // 主題
}

　 　2）代碼提示功能

        實現代碼提示功能首先要定義需要提示的代碼代碼文件，然后需要設置給編輯器

• 提示的代碼：

  export const tags = {
     "!attrs": { // 若tag標簽里邊沒有設置attr屬性,則所有的標簽自帶id和class屬性，此為自定義項，非必須
         id: null,
         class: ["A", "B", "C"]
      },
      Button: {
          attrs: {
             x: null,
             y: null,
            w: null,
            h: null,
            align: ["center", "left", "right"],
            alignV: ["center", "top", "bottom"],
            Visibility: null
         }
      }
  }

• 觸發條件定義

CodeMirror.commands.completeAfter = function (cm, pred) {
    if (!pred || pred()) setTimeout(function () {
        if (!cm.state.completionActive)
            cm.showHint({ completeSingle: false });
    }, 100);
    return CodeMirror.Pass;
};
CodeMirror.commands.completeIfAfterLt = function (cm) {
    return CodeMirror.commands.completeAfter(cm, function () {
        var cur = cm.getCursor();
        return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";
    });
};
CodeMirror.commands.completeIfInTag = function (cm) {
    return CodeMirror.commands.completeAfter(cm, function () {
        var tok = cm.getTokenAt(cm.getCursor());
        var reg = /[""]/;
        if (tok.type == "string" && (!reg.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false;
        var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
        return inner.tagName;
    });
};

• javascript代碼

import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/xml-hint.js"; 

this.editor = CodeMirror.fromTextArea(this.$refs.code, {
     extraKeys: {
          "'<'": "completeAfter",
          "'/'": "completeIfAfterLt",
          "' '": "completeIfInTag",
          "'='": "completeIfInTag",
     }
 }
 this.editor.setOption("hintOptions", { schemaInfo: this.tags })

　　3）格式化

• 格式化定義

CodeMirror.defineExtension("autoFormatRange", function (from, to) {
    var cm = this;
    var outer = cm.getMode(),
        text = cm.getRange(from, to).split("\n");
    var state = CodeMirror.copyState(outer, cm.getTokenAt(from).state);
    var tabSize = cm.getOption("tabSize");

    var out = "",
        lines = 0,
        atSol = from.ch == 0;

    function newline() {
        out += "\n";
        atSol = true;
        ++lines;
    }

    for (var i = 0; i < text.length; ++i) {
        var stream = new CodeMirror.StringStream(text[i], tabSize);
        while (!stream.eol()) {
            var inner = CodeMirror.innerMode(outer, state);
            var style = outer.token(stream, state),
                cur = stream.current();
            stream.start = stream.pos;
            if (!atSol || /\S/.test(cur)) {
                out += cur;
                atSol = false;
            }
            if (
                !atSol &&
                inner.mode.newlineAfterToken &&
                inner.mode.newlineAfterToken(
                    style,
                    cur,
                    stream.string.slice(stream.pos) || text[i + 1] || "",
                    inner.state
                )
            )
                newline();
        }
        if (!stream.pos && outer.blankLine) outer.blankLine(state);
        if (!atSol) newline();
    }

    cm.operation(function () {
        cm.replaceRange(out, from, to);
        for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) {
            cm.indentLine(cur, "smart")
        }
    });
});

• javascript代碼

this.editor = CodeMirror.fromTextArea(this.$refs.code, {
    extraKeys: {
        "Shift-Tab": function () { // 選中部分格式化
              that.formatSelection()
         },
         "Shift-Alt": function () {  // 全文格式化，快捷鍵可自定義，根據具體業務此處格式化的同時要處理其它邏輯，故把此處代碼提出來寫
               that.format()
          }
     }
 }
  // 選中部分格式化 indentAuto為codemirror自帶api
  formatSelection() {
       CodeMirror.commands.indentAuto(this.editor);
  },
  // 格式化
 format() {
       this.editor.autoFormatRange({ line: 0, ch: 0 }, { line: this.editor.lineCount() });
 }

 　　4）搜索替換

• 搜索替換框

　　首先附上codemirror自帶搜索替換功能demo地址, https://codemirror.net/demo/search.html ，此種方式完全不符合現在編輯器的操作習慣，經過查詢多方資料，發現一個插件cm-searchbox，此插件的樣式是符合現代編輯器的，附圖 ，但是此插件沒有高亮和計算當前匹配第幾個和一共匹配多少個的功能，我們就在此基礎上完善功能吧！

• 功能實現，cm-search插件中的代碼全部保留，以下都是分析源代碼之后新添加的代碼

　　為了計算匹配個數，我們需要在最開始的地方引入StringStream對象

const StringStream = CodeMirror.StringStream

　　在每次需要搜索替換時獲取state並調用startSearch方法

var state = getSearchState(cm);
function SearchState() {
     this.posFrom = this.posTo = this.lastQuery = this.query = null;
     this.overlay = null;
}
 function getSearchState(cm) {
      return cm.state.search || (cm.state.search = new SearchState());
 }

this.startSearch = function (cm, state, query) {
        state.query = parseQuery(query);
        if (self.caseSensitiveOption.checked == undefined) { // caseSensitiveOption.checked=true 開啟區分大小寫
            self.caseSensitiveOption.checked = false
        }
        if (self.wholeWordOption.checked == undefined) { // caseSensitiveOption.checked=true 開啟全字匹配
            self.wholeWordOption.checked = false
        }
        if (self.regExpOption.checked == undefined) { // regExpOption.checked=true 開啟正則
            self.regExpOption.checked = false
        }
        cm.removeOverlay(state.overlay, self.caseSensitiveOption.checked);
        state.overlay = searchOverlay(
            state.query, self.caseSensitiveOption.checked, self.wholeWordOption.checked, self.regExpOption.checked);
        cm.addOverlay(state.overlay, {
            opaque: true
        });
    }

　　在startSearch中引用了searchOverlay和parseQuery方法，用於高亮和匹配個數計算

function searchOverlay(query, caseSensitive, wholeWord, regExp) {
        if (regExp || wholeWord) {
            if (wholeWord)  query = '\\b' + query + '\\b';
            query = RegExp(query);
        }
        if (typeof query == "string")
            query = new RegExp(query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"), caseSensitive ? "g" : "gi");
        else if (!query.global)
            query = new RegExp(query.source, caseSensitive ? "g" : "gi");

        // 獲取匹配個數以及當前匹配index，totalMatch為總匹配個數，curMatchIndex為當前匹配索引
        totalMatch = 0
        var current = cm.listSelections()[0]
        cm.eachLine((line) => {
            var stream = new StringStream(line.text, cm.options.tabSize)
            var match = query.exec(stream.string);
            var lineNumber = cm.getLineNumber(line)
            while (match) {
                totalMatch += 1
                if (lineNumber == current.anchor.line && match.index == current.anchor.ch) {
                    curMatchIndex = totalMatch
                }
                stream = new StringStream(line.text, cm.options.tabSize)
                match = query.exec(stream.string); // 從字符串出現的位置的下一位置開始繼續查找
            }
        })

         if (totalMatch) {

            aceTotal.innerHTML = totalMatch + "中的" + curMatchIndex

         } else {

            aceTotal.innerHTML = "無結果"

         }

// 給匹配到的添加class值cm-searching，實現代碼高亮
        return {
            token: function (stream) {
                query.lastIndex = stream.pos;
                var match = query.exec(stream.string);
                if (match && match.index == stream.pos) {
                    stream.pos += match[0].length || 1;
                    return "searching";
                } else if (match) {
                    stream.pos = match.index;

                } else {
                    stream.skipToEnd();
                }
            }
        };
    }
function parseString(string) {
    return string.replace(/\\(.)/g, function (_, ch) {
        if (ch == "n") return "\n";
        if (ch == "r") return "\r";
        return ch;
    });
};
function parseQuery(query) {
    if (query.exec) {
        return query;
    }
    var isRE = query.indexOf('/') === 0 && query.lastIndexOf('/') > 0;
    if (!!isRE) {
        try {
            var matches = query.match(/^\/(.*)\/([a-z]*)$/);
            query = new RegExp(matches[1], matches[2].indexOf("i") == -1 ? "" : "i");
        } catch (e) { } // Not a regular expression after all, do a string search
    } else {
        query = parseString(query);
    }
    if (typeof query == "string" ? query == "" : query.test("")) query = /x^/;
    return query;
}

 　　希望小伙伴們多多指正哈~