在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示)
1、使用npm安装依赖
npm install --save codemirror;
2、在页面中放入如下代码
<template>
<div>
<textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea>
</div>
</template>
<script>
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
let CodeMirror = require('codemirror/lib/codemirror')
require('codemirror/addon/edit/matchbrackets')
require('codemirror/addon/selection/active-line')
require('codemirror/mode/sql/sql')
require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/sql-hint')
export default {
name: 'CodeMirror',
data () {
return {
code: '//按Ctrl键进行代码提示'
}
},
mounted () {
debugger
let mime = 'text/x-mariadb'
// let theme = 'ambiance'//设置主题,不设置的会使用默认主题
let editor = CodeMirror.fromTextArea(this.$refs.mycode, {
mode: mime, // 选择对应代码编辑器的语言,我这边选的是数据库,根据个人情况自行设置即可
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
// theme: theme,
// autofocus: true,
// extraKeys: { Ctrl: 'autocomplete' }, // 自定义快捷键
hintOptions: {
// 自定义提示选项
tables: {
users: ['name', 'score', 'birthDate'],
countries: ['name', 'population', 'size']
}
}
})
// 代码自动提示功能,记住使用cursorActivity事件不要使用change事件,这是一个坑,那样页面直接会卡死
editor.on('cursorActivity', function () {
editor.showHint()
})
}
}
</script>
<style>
.codesql {
font-size: 11pt;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
</style>
编译器的事件触发器
触发器使用方法:(change事件为例)
this.CodeMirrorEditor.on("change",function(){
//事件触发后执行事件
alert("change")
});
1
2
3
4
取消触发器方法:
this.CodeMirrorEditor.off("change")
1
“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
this.CodeMirrorEditor.setValue(“Hello Kitty”):设置编辑器内容
this.CodeMirrorEditor.getValue():获取编辑器内容
this.CodeMirrorEditor.getLine(n):获取第n行的内容
this.CodeMirrorEditor.lineCount():获取当前行数
this.CodeMirrorEditor.lastLine():获取最后一行的行号
this.CodeMirrorEditor.isClean():boolean类型判断编译器是否是clean的
this.CodeMirrorEditor.getSelection():获取选中内容
this.CodeMirrorEditor.getSelections():返回array类型选中内容
this.CodeMirrorEditor.replaceSelection(“替换后的内容”):替换选中的内容
this.CodeMirrorEditor.getCursor():获取光标位置,返回{line,char}
this.CodeMirrorEditor.setOption("",""):设置编译器属性
this.CodeMirrorEditor.getOption(""):获取编译器属性
this.CodeMirrorEditor.addKeyMap("",""):添加key-map键值,该键值具有比原来键值更高的优先级
this.CodeMirrorEditor.removeKeyMap(""):移除key-map
this.CodeMirrorEditor.addOverlay(""):Enable a highlighting overlay…没试出效果
this.CodeMirrorEditor.removeOverlay(""):移除Overlay
this.CodeMirrorEditor.setSize(width,height):设置编译器大小
this.CodeMirrorEditor.scrollTo(x,y):设置scroll到position位置
this.CodeMirrorEditor.refresh():刷新编辑器
this.CodeMirrorEditor.execCommand(“命令”):执行命令