在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()
                }
            }
        }