vue3代码编辑器 codemirror-editor-vue3 的使用和配置

后台管理接到一个新功能，需要在前端页面执行 SQL 语句，并展示查询的结果，以表格的形式展示结果。这篇文章记录了具体实现方式，方便以后遇到同样的功能。

第一步： 先询问 AI 要实现这个功能有哪些免费插件。因此找到了 codemirror-editor-vue3 插件。

1.安装插件：

npm install codemirror-editor-vue3 codemirror@5.x -S

2.main.ts 注册

import { InstallCodeMirror } from "codemirror-editor-vue3";
// 注册 CodeMirror
app.use(InstallCodeMirror);

3.组件引入使用

import Codemirror from "codemirror-editor-vue3";
// import { Editor, EditorConfiguration } from "codemirror";
// 引入css文件
import 'codemirror/lib/codemirror.css'
// 引入主题 可以从 codemirror/theme/ 下引入多个
import 'codemirror/theme/idea.css'

// mode，这里是sql语句，所以引入sql,如果是js，就引入js相关文件
import "codemirror/mode/sql/sql.js"

// 引入语言模式 可以从 codemirror/mode/ 下引入多个
// 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/sql-hint';
import "codemirror/addon/display/placeholder.js";

4.组件使用

<Codemirror v-model:value="sqlStatements" :options="cmOptions" class="cm-component" :indent-with-tab="true"
        ref="cmEditor" height="346" width="100%" @ready="onReady" />
        
//插件的相关配置：
const editorRef = ref(null);
const cmEditor = ref(null);
const cmOptions = ref({
  // 语言及语法模式
  mode: 'text/x-sql',
  // 主题
  theme: 'default', // 'idea' default
  // 显示函数
  line: true,
  smartIndent: true,
  // 显示行号
  lineNumbers: true,
  // 软换行
  lineWrapping: true,
  tabSize: 4, // 光标缩进
  readOnly: false, // 无法输入
  gutters: ["CodeMirror-lint-markers"],
  placeholder: '请输入SQL语句\n可选中单条语句执行',
  hintOptions: {
    // 避免由于提示列表只有一个提示信息时，自动填充
    completeSingle: false,
    // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息，用于代码提示
    tables: tableStructureInfo.value // 这里的数据是后端给的
  },
  extraKeys: {
    'Ctrl': 'autocomplete',
  }
});

插件引入完后，在页面上长这样：

接下来要实现的功能是：输入sql语句时要有表和字段的提示，这个数据后端会给我们，数据格式是这样的,

代码实现：

function onReady(editor: any) {
  // 调试：检查CodeMirror全局对象和sqlHint是否存在
  editorRef.value = editor;
  editor.on('inputRead', function (cm: any) {
    cm.showHint({
      hint: (editor: any) => {
        const hintResult = window.CodeMirror.hint.sql(editor, { tables: tableStructureInfo.value });
        return hintResult;
      }
    });

  });
};

效果如下：