(for more configuration items, refer to: https://blog.csdn.net/JLU_Lei/article/details/80259697 )
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 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
npm install --save sql-formatter npm install --save vue-codemirror2, 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> <span> <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" > <el-form ref="addRecordFormRef" :rules="addRecordFormRules" :model="addRecordForm" :label-position="labelPosition" label-width="110px" > <el-form-item label="Query name:" prop="statisticsName"> <el-input v-model="addRecordForm.statisticsName" placeholder="Please select" 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" 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" style="width: 100%" filterable > </el-input> </el-form-item> </el-form> <div> <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"></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>