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 // 获取编辑器中给定点之间的文本