sql语句高亮：codemirror / vue-codemirror 插件 使用总结

1、安装vue-codemirror

npm install vue-codemirror --save

2、在main.js中引入

import { codemirror } from 'vue-codemirror'

import 'codemirror/lib/codemirror.css'

Vue.use(codemirror)

3、在使用的组件中引入codemirror

import { codemirror } from 'vue-codemirror'

import 'codemirror/mode/sql/sql.js' //我主要是想高亮sql语句，如果是其他的语言，则引入相应的js

<template>

<codemirror ref="cmRef" v-model="formData.sql" :options="cmOptions"></codemirror>

</template>

<script>
import { codemirror } from 'vue-codemirror'

import 'codemirror/mode/sql/sql.js' //我主要是想高亮sql语句，如果是其他的语言，则引入相应的js
export default {

components: {  codemirror  },

data(){

return{

cmOptions: {

mode: 'text/x-mariadb',

indentWithTabs: true,

smartIndent: true,

lineNumbers: true,

matchBrackets: true,

styleActiveLine: true,

cursorHeight:1, // 光标高度

autoRefresh: true

},

}

}

}</script>

this.$refs.cmExpressionsRef.codemirror.getValue() // 取得编辑器的值
this.$refs.cmExpressionsRef.codemirror.focus() // 取得编辑器焦点
this.$refs.cmExpressionsRef.codemirror.setCursor(2,4)  // line:0-~ 哪一行, ch: 哪个字节
this.$refs.cmExpressionsRef.codemirror.getCursor() // line:0-~ 哪一行, ch: 哪个字节
getRange(from: {line, ch}, to: {line, ch}, ?separator: string) → string // 获取编辑器中给定点之间的文本

参考：CodeMirror使用说明书_Alex_________的博客-CSDN博客_codemirror中文文档