Some configuration items of sql editor

(for more configuration items, refer to: https://blog.csdn.net/JLU_Lei/article/details/80259697 )

event listeners

Trigger usage: editor.on('chang ', () = > {})
Cancel trigger method: ediotr.off('change ')

"Changes": triggered every time the editor content changes
"beforeChange": the event is triggered before the change takes effect
"cursorActivity": triggered when the cursor or selection (content) changes, or the content of the editor changes.
"keyHandled": triggered after the shortcut key in the shortcut key map is handled
"inputRead": triggered when the user enters or pastes into the editor.
"Electricinput": triggered when the specified electricinput is received
"beforeSelectionChange": this event is triggered before the selection changes
"viewportChange": triggered when the editor's view port changes (scrolling, editing or other actions)
"gutterClick": triggered when the gutter (line number area) of the editor is clicked
"Focus": triggered when the editor receives focus
"blur": triggered when the editor loses focus
"Scroll": triggered when the editor scroll bar scrolls
"keydown", "keypress", "keyup", "mousedown", "dblclick" hardware event trigger

The following details how vue imports the sql editor to write sql

#API this.CodeMirrorEditor.setValue("Hello Kitty"): set the editor content this.CodeMirrorEditor.getValue(): get the editor content this.CodeMirrorEditor.getLine(n): get the content of line n this.CodeMirrorEditor.lineCount(): get the current number of lines this.CodeMirrorEditor.lastLine(): get the line number of the last line this.CodeMirrorEditor.isClean():boolean type judge whether the compiler is clean this.CodeMirrorEditor.getSelection(): get the selected content this.CodeMirrorEditor.getSelections(): return the array type selected content this.CodeMirrorEditor.replaceSelection("replaced content"): replace the selected content this.CodeMirrorEditor.getCursor(): get the cursor position and return {line,char} this.CodeMirrorEditor.setOption("", ""): set compiler attribute this.CodeMirrorEditor.getOption(""): get compiler attribute this.CodeMirrorEditor.addKeyMap("", ""): add key map key value, which has higher priority than the original key value this.CodeMirrorEditor.removeKeyMap (""): remove key map this. Codemirroreditor. Addoverlay ("") : enable a highlighting overlay... No effect. this.CodeMirrorEditor.removeOverlay (""): remove Overlay this.CodeMirrorEditor.setSize(width,height): set compiler size this.CodeMirrorEditor.scrollTo(x,y): set scroll to position this.CodeMirrorEditor.refresh(): refresh editor / n this.CodeMirrorEditor.execCommand("command"): Execute command

design sketch

1, Download the sql editor plug-in

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

2, Use steps

1. Introduction

Parent component

Subcomponents

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");

2.vue files (parent and child)

Parent component:

<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"
                >Click to display the dialog box</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="Query name:" prop="statisticsName">
          <el-input
            v-model="addRecordForm.statisticsName"
            placeholder="Please select"
            class="selcClass timesel"
            style="width: 100%"
            filterable
            @change="statisticsNameIpt"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="SQL script:" prop="sqlcontent">
          <el-tag
            type="warning"
            style="position: absolute; top: 35px; left: -75px; cursor: pointer"
            @click="formatterBtn"
            >format</el-tag
          >
          <SqlEditor
            v-if="sqlVisible"
            ref="sqleditor"
            :value="addRecordForm.sqlcontent"
            :tables="sqlTable"
            @changeTextarea="changeTextarea($event)"
          />
          <!-- <el-input
            type="textarea"
            :rows="2"
            placeholder="Please enter the content"
            style="width: 100%"
            v-model="addRecordForm.sqlcontent"
          /> -->
        </el-form-item>
        <el-form-item label="remarks:" prop="remark">
          <el-input
            v-model="addRecordForm.remark"
            placeholder="Please select"
            class="selcClass timesel"
            style="width: 100%"
            filterable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="sort:" prop="serialNo">
          <el-input
            v-model="addRecordForm.serialNo"
            placeholder="Please select"
            class="selcClass timesel"
            style="width: 100%"
            filterable
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="myBtn text-align_right">
        <el-button @click="cancle">cancel</el-button>
        <el-button type="primary" @click="addSure">confirm</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: 'Please enter query name', trigger: 'blur' },],
        sqlcontent: [{ required: true, message: 'Please enter SQL script', trigger: 'blur' },],
        remark: [{ required: true, message: 'Please enter comments', trigger: 'blur' },],
        serialNo: [{ required: true, message: 'Please enter sorting', trigger: 'blur' },],
      },
      addRecordForm: {
        statisticsName: '',
        sqlcontent: '',
        remark: "",
        serialNo: '',
        statisticsId: '',
      },
      labelPosition: 'right',
    }
  },
  methods: {
 //Record sql input changes in real time
    changeTextarea(val) {
      this.addRecordForm.sqlcontent = val;
    },
    //Format the input sql statement
    formatterBtn(val) {
      let dom = this.$refs.sqleditor
      dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()))
    },
    editLeftTree() {
      this.sqlVisible= true
      //Echo 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>

Subcomponents:

<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: {
      // Receive value passed by parent component
      value: {
        type: String,
        default: ''
      },
      sqlStyle: {
        type: String,
        default: 'default'
      },
      readOnly: {
        type: [Boolean, String]
      },
      // The parent component passes the table structure to the editor to automatically prompt the table name and field name
      tables: {
        type: Object,
        default: () => { }
      }
  },
  watch: {
    // Listen to the change of newVal value, get the value through getValue method and pass it to the parent component
    newVal(newV, oldV) {
      if (this.editor) {
        this.$emit('changeTextarea', this.editor.getValue());
      }
    },
    // Assign value to value in the editor configuration item
    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' / / set the theme. If not set, the default theme will be used
    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
      }
    });
    //Code auto prompt function. Remember to use cursorActivity event instead of change event. This is a pit, so the page will be stuck directly = = triggered by the editor
    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>