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

　　接上篇，本篇介紹變量跳轉，代碼字體放大縮小，鼠標划過添加下划線功能。

　　5）變量定義跳轉

　　實現變量跳轉功能，我這里是和后端一起合作完成的，后端伙伴把變量的位置返回給我，當用戶選中一個變量的使用時候，點擊F12或者右鍵菜單會跳轉到定義處。若做到用戶鼠標點在代碼上不用選中點右鍵菜單就能跳轉，需要用戶點擊的時候就獲取到用戶點擊的區域的文本，在源代碼中找到了wordAt這個方法，並按照需求進行了改造實現了獲取到了需要的結果。

// 此方法為源碼中自帶的焦點放在一個單詞中間，就能返回此時該焦點所在文本的位置信息和文本本身，大家可以根據自己的特殊需要做一些改造
function wordAt(cm, pos) {
    var start = pos.ch, end = start, line = cm.getLine(pos.line);
    while (start && CodeMirror.isWordChar(line.charAt(start - 1))) --start;
    while (end < line.length && CodeMirror.isWordChar(line.charAt(end))) ++end;
    return {from: Pos(pos.line, start), to: Pos(pos.line, end), word: line.slice(start, end)};
  }

 

this.editor = CodeMirror.fromTextArea(this.$refs.code, {
    extraKeys: {
        "F12": function() { // 跳轉自定義變量
            that.goToDefinition()
        }
    }
}
goToDefinition(word) { 
    if (!word) {
        this.selectWord = this.editor.getSelection();
    }
    if (this.selectWord == "" || this.selectWord.indexOf("#") == -1) {
        message("請選擇自定義變量") return false;
    } else if (this.defineVarList.length == 0) {
        message("無自定義變量") return false;
    }

    let defined = null 
       this.defineVarList.forEach(item = >{
        if (item.key == this.selectWord.substring(1)) {
            defined = item
        }
    }) if (defined == null) {
        message("請選擇自定義變量") return false;
    }
    let scrollNum = 0
    if (defined.from.line <= 20) {
        scrollNum = 0
    } else {
        scrollNum = defined.from.line - 15
    }

    this.editor.focus();
    this.editor.setCursor(defined.from);
    this.editor.setSelection(defined.from, defined.to);
    this.editor.scrollIntoView({
        line: scrollNum,
        ch: 0
    })
}

　　6）代碼字體方法縮小

　　在codemirror編輯器外邊套一層div，動態設置字號就可以了

<div :style="{fontSize:`${editorFontSize}px`}">
        <textarea ref="code"></textarea>
</div>

　　7）鼠標划過添加下划線

　　按住ctrl鍵時，鼠標划過編輯器中的標簽、屬性、屬性值添加下划線，此功能我用到的api是markText

 

var wrapperElement = this.editor.getWrapperElement();
// 監聽鼠標划過，ctr按下時，鼠標划過添加下划線
wrapperElement.addEventListener('mousemove', function (e) {
       if (!that.ctrlKeyPressed) {
            return false;
       }
       let y = e.target.getBoundingClientRect().top;
       let pos = that.editor.coordsChar({ left: e.clientX, top: y }, 
 "page");
       let token = that.editor.wordAt(that.editor, pos)
       that.clearTextMarker()
       that.editor.markText(token.from, token.to, { className: "style-mouseover" });
});
// 清空指定的TextMarker對象
clearTextMarker() {
            let marks = this.editor.getAllMarks()
            if (!marks.length) return false;
            for (let i = 0; i < marks.length; i++) {
                if (marks[i].className == "style-mouseover") {
                    marks[i].clear()
                }
            }
        }