VUE实现SQL在线编辑器,SQL分析器,SQL代码关键字提示

vue 同时被 2 个专栏收录
24 篇文章 0 订阅
56 篇文章 0 订阅

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

 

  • 0
    点赞
  • 26
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值