vue整合codemirror组件,实现前端页面代码的编辑及显示(sql,java,python等)

1.用途

用于前端页面编辑,展示代码,可以灵活选择语言,比如shell,sql,python,js等,可自定义主题及代码提示等,功能非常强大

2.效果图

我这边是用来展示sql脚本的,结合了element-ui弹出层来实现的
在这里插入图片描述

3.插件安装

1	npm install vue-codemirror --save

4.代码

html

1	<codemirror v-model="content" :options="options"></codemirror>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
// 引入主题,配置后生效
import 'codemirror/theme/rubyblue.css'
//引入语言,配置后生效
import 'codemirror/mode/sql/sql.js'

export default {
components: {
codemirror
},
data() {
return {
//需编辑和显示的内容
content: '',
// 默认配置
options: {
tabSize: 2, // 缩进格式
theme: 'rubyblue', // 指定主题，对应主题库 JS 需要提前引入
lineNumbers: true, // 是否显示行号
//指定语言类型,如果需要编辑和显示其他语言,需要import语言js然后修改此配置
mode: 'sql',
line: true,
styleActiveLine: true, // 高亮选中行
//是否为只读,如果为"nocursor" 不仅仅为只读连光标都无法在区域聚焦
readOnly: true,
hintOptions: {
completeSingle: true // 当匹配只有一项的时候是否自动补全
}
},
}
}
}

5.支持语言

常用语言引入方式

1
2
3
4
5
6
7
8
9
10
11

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'

支持语言
在这里插入图片描述

6.最后

这边只是对此组件的简单使用,如果需要高级用法(比如语言切换,动态提示等)请自行百度;