Vue在线SQL编辑器

依赖

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

如果出现format报错。可以尝试降低sql-formatter的版本来解决

SQL编辑器组件

    <div>
        <textarea ref="mycode" class="codesql"  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 {
        data() {
            return {
                editor: null
            }
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            sqlStyle: {
                type: String,
                default: 'default'
            },
            readOnly: {
                type: [Boolean, String]
            }
        },
        watch: {
            newVal (newV, oldV) {
                if (this.editor) {
                    this.$emit('changeTextarea', this.editor.getValue())
                    
                }
            }
        },
        computed: {
            newVal () {
                if (this.editor) {
                    return this.editor.getValue()
                }
            }
        },
        
        mounted(){
            let mime = 'text/x-sql'
            'text/'为编辑器语言前缀
            text/xxx
            支持：javascript、XML/HTML、java、SQL、Python等（详细请查询官网）
            //let theme = 'ambiance'//设置主题，不设置的会使用默认主题
            this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
                value: this.value,
                mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
                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: {
                    //     users: ['name', 'score', 'birthDate'],
                    //     countries: ['name', 'population', 'size']
                    // }
                }
            })
            //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
            this.editor.on('inputRead', () => {
                this.editor.showHint()
            })
        },
        methods: {
            setVal () {
                // 清空SQL编辑器内容
                this.editor.setValue('')
            }
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .CodeMirror {
        color: black;
        direction: ltr;
        line-height: 22px;
        height: 260px;
        .CodeMirror-scroll {
            height:255px;
            padding-bottom:0
        }
    }
    /* // 这句为了解决匹配框显示有问题而加 */
    .CodeMirror-hints{
        z-index: 9999 !important;
    }
</style>

引用

1. import引用进父组件
2. components注册组件

data里面
 basicInfoForm:{ sqlMain: ''},

<子组件 ref="sqleditor" :value="basicInfoForm.sqlMain"  @changeTextarea="changeTextarea($event)"/>

methods方法
 SQL编辑器内容
   changeTextarea (val){
    // 将值赋给sqlMain
    this.basicInfoForm.sqlMain = val
  },