Vue中使用CodeMirror插件

介绍

CodeMirror是一个代码编辑器组件，可以嵌入到Web页面中。核心库仅提供编辑器组件，不提供伴随按钮，自动完成或其他IDE功能。它提供了丰富的API，并且支持语法高亮显示，自动提示等功能。

相关网址

1. Vue官方插件库推荐的集成实现
2. codemirror 支持的语言类型
3. codemirror 官网

基本用法

1. 安装插件

npm i codemirror --save

2. 引入核心配置文件

// 引入全局实例
import _CodeMirror from 'codemirror';
// 核心样式
import 'codemirror/lib/codemirror.css'

// 以下文件可按需引入
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/blackboard.css';
import 'codemirror/theme/cobalt.css';
import 'codemirror/addon/display/fullscreen.css'; // 全屏显示编辑器
import 'codemirror/addon/display/fullscreen.js'; // 全屏显示编辑器
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/mode/clike/clike.js';
import 'codemirror/mode/markdown/markdown.js';
import 'codemirror/mode/python/python.js';
import 'codemirror/mode/r/r.js';
import 'codemirror/mode/shell/shell.js';
import 'codemirror/mode/sql/sql.js';
import 'codemirror/mode/swift/swift.js';
import 'codemirror/mode/vue/vue.js';
// 引入代码自动提示插件
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/addon/hint/show-hint';

// 获取全局实例
const CodeMirror = window.CodeMirror || _CodeMirror;

3. 引入后在html界面中建立textarea标签，用于生成代码框

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

4. 在data中定义绑定值与配置项

code: '',
// 默认配置
options: {
    tabSize: 2, // 缩进格式
    theme: 'cobalt', // 主题，对应主题库 JS 需要提前引入
    lineNumbers: true, // 显示行号
    line: true,
    readOnly: true, // 设置为只读true/false;也可设置为"nocursor"失去焦点
    hintOptions: { // 自定义提示选项
        completeSingle: false, // 当匹配只有一项的时候是否自动补全
        tables: {
            users: ['name', 'score', 'birthDate'],
            countries: ['name', 'population', 'size'],
            score: ['name']
        }
    }
},

5. 在methods中通过$refs属性获取容器元素,并初始化一个编辑器,在mounted中调用

 mounted () {
        // 初始化
        this._initialize();
 },

 methods: {
	_initialize(){
		// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
 		this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options);
		// 编辑器赋值
            this.coder.setValue(this.value || this.code);
		// 动态设置CodeMirror属性：(以设置支持语言mode为例)	
		this.coder.setOption('mode', ('text/x-sql'));
	}
}

编辑器的事件触发

绑定事件(例):

this.coder.on("change",function(){
// 事件触发后执行事件
alert("change")
});

事件解绑(取消触发):

this.coder.off("change")

可绑定事件:

“changes”：每次编辑器内容更改时触发
“beforeChange”：事件在更改生效前触发
“cursorActivity”：当光标或选中(内容)发生变化，或者编辑器的内容发生了更改的时候触发。
“keyHandled”:快捷键映射(key map)中的快捷键被处理(handle)后触发
“inputRead”:当用户输入或粘贴时编辑器时触发。
“electrictInput”:收到指定的electrict输入时触发
“beforeSelectionChange”:此事件在选中内容变化前触发
“viewportChange”：编辑器的视口( view port )改变（滚动，编辑或其它动作）时触发
“gutterClick”：编辑器的gutter(行号区域)点击时触发
“focus”：编辑器收到焦点时触发
“blur”:编辑器失去焦点时触发
“scroll”:编辑器滚动条滚动时触发
“keydown”, “keypress”, “keyup”，“mousedown”, “dblclick”硬件事件触发器

API

setValue(“Hello Kitty”)：设置编辑器内容
getValue()：获取编辑器内容
getLine(n):获取第n行的内容
lineCount()：获取当前行数
lastLine()：获取最后一行的行号
isClean():boolean类型判断编译器是否是clean的
getSelection()：获取选中内容
getSelections():返回array类型选中内容
replaceSelection(“替换后的内容”):替换选中的内容
getCursor():获取光标位置,返回{line,char}
setOption("",""):设置编译器属性
getOption(""):获取编译器属性
addKeyMap("",""):添加key-map键值，该键值具有比原来键值更高的优先级
removeKeyMap（""）:移除key-map
addOverlay(""):Enable a highlighting overlay…没试出效果
removeOverlay（""）:移除Overlay
setSize(width,height):设置编译器大小
scrollTo(x,y):设置scroll到position位置
refresh():刷新编辑器
execCommand(“命令”):执行命令