Vue中使用CodeMirror插件

介绍

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

相关网址

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

基本用法

  1. 安装插件
npm i codemirror --save
  1. 引入核心配置文件
// 引入全局实例
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;

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


  1. 在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']
        }
    }
},
  1. 在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(“命令”):执行命令

你可能感兴趣的:(vue,codeMirror,elementUi)