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))},

?

總結

以上是生活随笔為你收集整理的VUE实现SQL在线编辑器，SQL分析器，SQL代码关键字提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。