vue3使用vue-codemirror插件，实现富文本编辑sql语句

背景：

最近帮领导做个工具，要在vue3的项目里开发。

在表单里提供富文本编辑器来输入sql语句。

第一个踩雷的点就是我不知道下载哪个插件比较好，就搜索了一下“vue 富文本编辑器”，给我推荐了vue-quill-editor，我就去下载并引用了，捯饬半天出不来。最后发现

我是vue3项目，人家不支持啊。哎，有时候真觉得自己上班上的好蠢。

最后我下载了vue-codemirrorGitHub - surmon-china/vue-codemirror: @codemirror code editor component for @vuejs

使用：

1、安装

npm install codemirror vue-codemirror --save
npm i @codemirror/lang-sql
npm i @codemirror/theme-one-dark

2、引用&&注册

import { Codemirror } from 'vue-codemirror'
import { sql } from "@codemirror/lang-sql";
import { oneDark } from "@codemirror/theme-one-dark";

components: {
    Codemirror,
},

3、代码部分

<el-form-item label="查询SQL" :prop="`dataTaskConfigList.${index}.configSql`" :rules="rules.configSql" style="margin-top: 20px;">
    <codemirror v-model="item.configSql"
        placeholder="Code goes here..."
        ref="mycodemirror"
        :style="{ width: '100%', height: '480px' }"
        :autofocus="true"
        :extensions="extensions"
        :indent-with-tab="true"
        @blur="handleBlur($event,item)"
        :tab-size="2"/>
</el-form-item>

data() {
    return {
        extensions: [sql(),oneDark],
    }
}

blur事件是我的业务处理逻辑，需要将输入的sql语句中以@开始和结束的参数提取出来并去重，处理成一个数组对象的键值对形式。

handleBlur(e,item) {
            if(!item.configSql) {
                item.sqlParamList = []
                return
            }
            const regex = /@[^@]+@/g;
            let tempData = Array.from(new Set(item.configSql.match(regex))); //去重且匹配
            let sqlParamList = tempData.map(val => {
                return {
                    key: val,
                    value: dayjs().format('YYYY-MM-DD')
                }
            })
            item.sqlParamList = JSON.parse(JSON.stringify(sqlParamList))
        },

4、实现效果