安装

pnpm i codemirror-editor-vue3 codemirror@^5 -S

如果项目是typescript

npm install @types/codemirror -D

使用

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    ref="editor"
    border
    height="300"
    width="100%"
    @ready="onReady"
  />
</template>
 
<script>
import { ref } from 'vue';
import Codemirror from 'codemirror-editor-vue3';
// 引入css文件
import 'codemirror/lib/codemirror.css'
// 引入主题 可以从 codemirror/theme/ 下引入多个
import 'codemirror/theme/idea.css'
// 引入语言模式 可以从 codemirror/mode/ 下引入多个
import 'codemirror/mode/sql/sql.js';
// 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/sql-hint';
 
export default {
  components: { Codemirror },
  setup() {
    const code = ref('SELECT *\n');
    const cmOptions = {
      // 语言及语法模式
      mode: 'text/x-sql',
      // 主题
      theme: 'default', // 'idea'
      // 显示函数
      line: true,
      // 显示行号
      lineNumbers: true,
      // 软换行
      lineWrapping: true,
      // tab宽度
      tabSize: 4,
      // 代码提示功能
      hintOptions: {
            // 避免由于提示列表只有一个提示信息时，自动填充
            completeSingle: false,
            // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息，用于代码提示
            tables: {
              "BPSuv": ["DocEntry", "Subject", "DocStatus","Remarks"],
              "BPSuvA": ["DocEntry", "LineNum", "Question","QstType"],
              "BPSuvB": ["DocEntry", "LineNum", "UserID","UserName"],
            },
          },
    };
    const onReady = (editor) => {
      editor.on('inputRead', function (cm, location) {
          if (/[a-zA-Z]/.test(location.text[0])) {
              cm.showHint();
          }
      });
    };
    return {
      code,
      cmOptions,
      onReady,
    }
  },
};
</script>

参考链接：Vue 3应用CodeMirror代码编辑器