在 Vue 3 项目中集成 CodeMirror 创建 SQL 编辑器

408 阅读3分钟

在 Vue 3 项目中集成 CodeMirror 创建 SQL 编辑器

在这篇文章中,我们将学习如何在 Vue 3 项目中集成 CodeMirror,以创建一个支持 SQL 语法高亮和自动补全的代码编辑器。​

什么是 CodeMirror?

CodeMirror 是一个功能强大的浏览器内代码编辑器,支持多种编程语言的语法高亮和代码补全。​

项目设置

首先,确保您的 Vue 3 项目已创建。然后,安装 codemirror-editor-vue3 组件和必要的 CodeMirror 依赖:​

npm install codemirror-editor-vue3 codemirror@^5

如果您的项目需要 TypeScript 支持,还需安装 @types/codemirror:​GitHub

npm install @types/codemirror -D

编写组件

在 Vue 3 组件中,使用 <Codemirror> 标签引入 CodeMirror 编辑器,并配置相关属性:​

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    :width="width"
    :height="height"
    :readonly="readonly"
    @ready="onReady"
    @blur="onInput"
  />
</template>

<script setup>
import { ref, computed, nextTick } from "vue";
import Codemirror from "codemirror-editor-vue3";

// 引入必要的 CSS 文件
import "codemirror/lib/codemirror.css";
import "codemirror/theme/idea.css";
import "codemirror/mode/sql/sql.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/sql-hint";
import "codemirror/addon/display/placeholder.js";

// 定义 props
const props = defineProps({
  readonly: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "300px",
  },
  placeholder: {
    type: String,
    default: "SELECT * FROM log_table WHERE id > ${id}",
  },
});

// 定义响应式变量
const code = ref("");

// 配置 CodeMirror 选项
const cmOptions = computed(() => ({
  mode: "text/x-sql",
  theme: "idea",
  lineNumbers: true,
  lineWrapping: true,
  tabSize: 4,
  readOnly: props.readonly ? "nocursor" : false,
  placeholder: props.placeholder,
  hintOptions: {
    completeSingle: false,
    tables: {
      BPSuv: ["DocEntry", "Subject", "DocStatus", "Remarks"],
      BPSuvA: ["DocEntry", "LineNum", "Question", "QstType"],
      BPSuvB: ["DocEntry", "LineNum", "UserID", "UserName"],
    },
  },
}));

const emit = defineEmits();

// 处理输入事件
const onInput = () => {
  emit("changeTextarea", code.value);
};

// 初始化编辑器
const onReady = (editor) => {
  editor.on("inputRead", (cm, event) => {
    if (/[a-zA-Z]/.test(event.text[0])) {
      cm.showHint();
    }
  });
  nextTick(() => {
    editor.refresh();
  });
};
</script>

<style>
.CodeMirror-hints {
  z-index: 9999 !important;
  position: absolute !important;
}
</style>

代码解析

  1. 引入组件和样式:​导入 codemirror-editor-vue3 组件以及 CodeMirror 的核心和附加功能的 CSS 和 JS 文件。​
  2. 定义属性(props) :​设置组件的只读状态、宽度、高度和占位符。​
  3. 响应式变量:​使用 ref 创建响应式的 code 变量,用于绑定编辑器的内容。​
  4. 配置选项:​通过 computed 创建 cmOptions,配置编辑器的模式、主题、行号、自动补全等功能。​
  5. 事件处理:​定义 onInput 方法,在编辑器失去焦点时触发 changeTextarea 事件,传递当前代码内容。​
  6. 初始化编辑器:​在 onReady 方法中,监听 inputRead 事件,当用户输入字母时,显示自动补全提示。​

使用案例

假设我们有一个日志查询系统,需要用户输入 SQL 查询语句。通过上述组件,我们可以在 Vue 3 项目中轻松实现一个功能完善的 SQL 编辑器,提供语法高亮、自动补全等功能,提升用户体验。​

例如,用户在编辑器中输入 SELECT * FROM 后,会自动提示可用的表名,如 BPSuvBPSuvA 等;继续输入表名后,输入 WHERE ,会提示该表的字段名,如 DocEntrySubject 等,帮助用户快速编写查询语句。​

注意事项

  • 主题设置:​确保引入的主题与 cmOptions 中的 theme 一致。​
  • 自动补全:​hintOptions 中的 tables 配置了 SQL 补全的表和字段信息,可根据实际需求调整。​
  • 样式调整:​通过修改 .CodeMirror-hintsz-index,确保自动补全提示不被其他元素遮挡。​

通过上述步骤,您可以在 Vue 3 项目中成功集成 CodeMirror,实现一个功能完善的 SQL 编辑器,提升用户体验和开发效率