VUE实现SQL在线编辑器,SQL分析器,SQL代码关键字提示
1、首先使用npm安装CodeMirror插件,sql-formatter格式化插件npm install --save codemirrornpm install --save sql-formatter2、然后引入该文件import 'codemirror/theme/ambiance.css'import 'codemirror/lib/codemirror.css'import 'code
·
1、首先使用npm安装CodeMirror插件,sql-formatter格式化插件
npm install --save codemirror
npm install --save sql-formatter
2、然后引入该文件
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
const 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')
import sqlFormatter from 'sql-formatter'
3、使用
<textarea ref="mycode" v-model="code" placeholder="按Ctrl键进行代码提示" class="codesql" style="height:200px;width:600px;" />
mounted() {
const mime = 'text/x-mariadb'
// let theme = 'ambiance'//设置主题,不设置的会使用默认主题
this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
mode: mime, // 选择对应代码编辑器的语言,我这边选的是数据库,根据个人情况自行设置即可
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
// theme: 'base16-light',
// autofocus: true,
extraKeys: { 'Ctrl': 'autocomplete' }, // 自定义快捷键
hintOptions: {// 自定义提示选项
tables: {
users: ['1112', '123123', '124124'],
countries: ['124', '124124', '1']
}
}
})
this.editor.on('cursorActivity', () => {
this.editor.showHint()
})
},
4. 格式化SQL语句
/* 代码格式化*/
format() {
/* 获取文本编辑器内容*/
let sqlContent = ''
sqlContent = this.editor.getValue()
/* 将sql内容进行格式后放入编辑器中*/
this.editor.setValue(sqlFormatter.format(sqlContent))
},
更多推荐
已为社区贡献11条内容
所有评论(0)