在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）

在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(“命令”):执行命令