vue导入sql编辑器_sql 编辑器 vue

sql编辑器一些配置项

（更多配置项参考：https://blog.csdn.net/JLU_Lei/article/details/80259697）

事件监听

触发器使用方法：editor.on(‘chang’, ()=>{})
取消触发器方法：ediotr.off(‘change’)

“changes”：每次编辑器内容更改时触发
“beforeChange”：事件在更改生效前触发
“cursorActivity”：当光标或选中(内容)发生变化，或者编辑器的内容发生了更改的时候触发。
“keyHandled”:快捷键映射(key map)中的快捷键被处理(handle)后触发
“inputRead”:当用户输入或粘贴到编辑器时触发。
“electrictInput”:收到指定的electrict输入时触发
“beforeSelectionChange”:此事件在选中内容变化前触发
“viewportChange”：编辑器的视口( view port )改变（滚动，编辑或其它动作）时触发
“gutterClick”：编辑器的gutter(行号区域)点击时触发
“focus”：编辑器收到焦点时触发
“blur”:编辑器失去焦点时触发
“scroll”:编辑器滚动条滚动时触发
“keydown”, “keypress”, “keyup”，“mousedown”, “dblclick”硬件事件触发器

下面详细记录vue导入sql编辑器进行sql编写的方法

---

# API this.CodeMirrorEditor.setValue(“Hello Kitty”)：设置编辑器内容 this.CodeMirrorEditor.getValue()：获取编辑器内容 this.CodeMirrorEditor.getLine(n):获取第n行的内容 this.CodeMirrorEditor.lineCount()：获取当前行数 this.CodeMirrorEditor.lastLine()：获取最后一行的行号 this.CodeMirrorEditor.isClean():boolean类型判断编译器是否是clean的 this.CodeMirrorEditor.getSelection()：获取选中内容 this.CodeMirrorEditor.getSelections():返回array类型选中内容 this.CodeMirrorEditor.replaceSelection(“替换后的内容”):替换选中的内容 this.CodeMirrorEditor.getCursor():获取光标位置,返回{line,char} this.CodeMirrorEditor.setOption("",""):设置编译器属性 this.CodeMirrorEditor.getOption(""):获取编译器属性 this.CodeMirrorEditor.addKeyMap("",""):添加key-map键值，该键值具有比原来键值更高的优先级 this.CodeMirrorEditor.removeKeyMap（""）:移除key-map this.CodeMirrorEditor.addOverlay(""):Enable a highlighting overlay…没试出效果 this.CodeMirrorEditor.removeOverlay（""）:移除Overlay this.CodeMirrorEditor.setSize(width,height):设置编译器大小 this.CodeMirrorEditor.scrollTo(x,y):设置scroll到position位置 this.CodeMirrorEditor.refresh():刷新编辑器/n this.CodeMirrorEditor.execCommand(“命令”):执行命令

效果图

一、下载sql编辑器插件

npm install --save sql-formatter
npm install --save vue-codemirror 
1
2

二、使用步骤

1.引入

父组件

子组件

import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
let 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");
1
2
3
4
5
6
7
8
9

2.vue文件(父和子)

父组件：

<template>
  <div class="history-container">
            <span class="btn2">
              <el-button
                @click="showBtn"
                style="
                  background-color: #fff;
                  color: #1192ac;
                  font-size: 14px;
                  height: 40px;
                  padding: 0px 8px;
                "
                size="small"
                >点击显示对话框</el-button
              >
            </span>
    <el-dialog
      @close="cancelScheduleInfoDia"
      :title="title"
      top="160px"
      width="400px;"
      :close-on-click-modal="false"
      :visible.sync="visible"
      class="planDialog"
    >
      <el-form
        ref="addRecordFormRef"
        :rules="addRecordFormRules"
        :model="addRecordForm"
        :label-position="labelPosition"
        label-width="110px"
        class="firstform"
      >
        <el-form-item label="查询名称:" prop="statisticsName">
          <el-input
            v-model="addRecordForm.statisticsName"
            placeholder="请选择"
            class="selcClass timesel"
            style="width: 100%"
            filterable
            @change="statisticsNameIpt"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="SQL脚本:" prop="sqlcontent">
          <el-tag
            type="warning"
            style="position: absolute; top: 35px; left: -75px; cursor: pointer"
            @click="formatterBtn"
            >格式化</el-tag
          >
          <SqlEditor
            v-if="sqlVisible"
            ref="sqleditor"
            :value="addRecordForm.sqlcontent"
            :tables="sqlTable"
            @changeTextarea="changeTextarea($event)"
          />
          <!-- <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            style="width: 100%"
            v-model="addRecordForm.sqlcontent"
          /> -->
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            v-model="addRecordForm.remark"
            placeholder="请选择"
            class="selcClass timesel"
            style="width: 100%"
            filterable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="排序:" prop="serialNo">
          <el-input
            v-model="addRecordForm.serialNo"
            placeholder="请选择"
            class="selcClass timesel"
            style="width: 100%"
            filterable
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="myBtn text-align_right">
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" @click="addSure">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import sqlFormatter from 'sql-formatter'
import SqlEditor from '@/components/SqlEditor'
export default {
  components: { SqlEditor },
  data() {
    return {
      sqlVisible: true,
      sqlTable: {},
      addRecordFormRules: {
        statisticsName: [{ required: true, message: '请输入查询名称', trigger: 'blur' },],
        sqlcontent: [{ required: true, message: '请输入SQL脚本', trigger: 'blur' },],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' },],
        serialNo: [{ required: true, message: '请输入排序', trigger: 'blur' },],
      },
      addRecordForm: {
        statisticsName: '',
        sqlcontent: '',
        remark: "",
        serialNo: '',
        statisticsId: '',
      },
      labelPosition: 'right',
    }
  },
  methods: {
 //实时记录sql输入变化
    changeTextarea(val) {
      this.addRecordForm.sqlcontent = val;
    },
    //格式化 输入的sql语句
    formatterBtn(val) {
      let dom = this.$refs.sqleditor
      dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()))
    },
    editLeftTree() {
      this.sqlVisible= true
      //回显sql
      this.$nextTick(() => {
        const dom = this.$refs.sqleditor;
        dom.editor.setValue(this.sqljb);
      });
    },
    cancle() {
      this.sqlVisible= false
      this.$refs.addRecordFormRef.resetFields()
    },
    cancelScheduleInfoDia() {
      this.sqlVisible= false
      this.$refs.addRecordFormRef.resetFields()
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

子组件：

<template>
  <div>
    <textarea ref="sqlEditor" v-model="value" class="codesql"></textarea>
  </div>
</template>
<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
let 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");
export default {
  name:'SqlEditor',
  data() {
    return {
      editor: null
    }
  },
    props: {
      // 接收父组件传值
      value: {
        type: String,
        default: ''
      },
      sqlStyle: {
        type: String,
        default: 'default'
      },
      readOnly: {
        type: [Boolean, String]
      },
      // 父组件将表结构传给编辑器，实现自动提示表名和字段名的功能
      tables: {
        type: Object,
        default: () => { }
      }
  },
  watch: {
    // 监听newVal值的变化，通过getValue方法获取到值并传递给父组件
    newVal(newV, oldV) {
      if (this.editor) {
        this.$emit('changeTextarea', this.editor.getValue());
      }
    },
    // 将value赋值给编辑器配置项中的value
    value(newV, oldV) {
      if (this.editor) {
        if (newV === '') {
          this.editor.setValue('');
        }
      }
    }
  },
  computed: {
    newVal() {
      if (this.editor) {
        return this.editor.getValue();
      }
    }

  },

  mounted() {
    let mime = 'text/x-mariadb'
    //let theme = 'ambiance'//设置主题，不设置的会使用默认主题
    this.editor = CodeMirror.fromTextArea(this.$refs.sqlEditor, {
      value: this.value,
      mode: { name: 'text/x-mysql' },
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      matchBrackets: true,
      cursorHeight: 1,
      lineWrapping: true,
      readOnly: this.readOnly,
      // theme: theme,
      autofocus: true,
      extraKeys: { Ctrl: 'autocomplete' },
      hintOptions: {
        completeSingle: false,
        tables: this.tables
      }
    });
    //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死==编辑器触发
    this.editor.on('inputRead', () => {
      this.editor.showHint()
    })
  },
  methods: {
    setVal() {
      if (this.editor) {
        if (this.value === '') {
          this.editor.setValue('')
        } else {
          this.editor.setValue(this.value)
        }

      }
    }
  }
}
</script>
<style>
.CodeMirror {
  color: black;
  direction: ltr;
  line-height: 22px;
}
.CodeMirror-hints {
  z-index: 9999 !important;
}
</style>

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117