Vue 3应用CodeMirror代码编辑器

引言

CodeMirror 是一个强大的浏览器代码编辑器，可以用来编写和编辑代码，支持多种编程语言。它的灵活性和强大的自定义功能使其成为 Web 应用程序的理想选择。在这篇文章中，我们将讨论如何在 Vue 3 项目中集成和应用 CodeMirror 编辑器以及一款专为Vue 3设计的 CodeMirror 组件codemirror-editor-vue3。

codemirror-editor-vue3 是一个基于 CodeMirror 5 开发的 Vue3 组件。该组件不仅支持官方提供的多种编程语言模式，还额外提供了日志输出展示模式。

环境准备

在开始之前，确保你已经创建了一个 Vue 3 项目。如果没有项目，可以通过以下命令初始化一个新的 Vue 项目：

npm init vue@latest
# 或者使用 Vue CLI 创建项目
vue create your-project-name
cd your-project-name

接下来，安装 CodeMirror 、codemirror-editor-vue3依赖包：

使用npm

npm install codemirror-editor-vue3 codemirror@^5 -S

使用yarn

yarn add codemirror-editor-vue3 codemirror@^5

使用 pnpm：

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

如果项目需要 TypeScript 支持，还需安装 @types/codemirror 依赖。

npm install @types/codemirror -D

在Vue 3项目中集成

在 Vue 3 中，我们可以创建一个 CodeMirror 组件来封装编辑器的逻辑和配置。以下是一个简单的 CodeMirror 组件示例：

全局注册组件

不推荐全局注册组件，这可能导致模板中无法正确获取类型提示。

在 main.js 中添加如下代码：

import { createApp } from 'vue';
import App from './App.vue';
import { InstallCodemirror } from 'codemirror-editor-vue3';

const app = createApp(App);
app.use(InstallCodemirror);
app.mount('#app');

全局注册的组件名为 Codemirror，也可以自定义组件名，例如：

app.use(InstallCodemirror, { componentName: 'CustomEditor' });

局部注册和使用小案例

<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>

案例演示：

CodeMirror 配置项

CodeMirror 提供了多种配置项，可以自定义编辑器的外观和功能。

以下是一些常用的配置选项：

1. 基本配置

value：编辑器的初始内容。
mode：设置编辑器的语言模式，如 javascript、htmlmixed、css 等，用于语法高亮。
theme：设置编辑器的主题，如 default、material、dracula 等。
lineNumbers：布尔值，是否显示行号。默认值为 false。
lineWrapping：布尔值，是否启用自动换行功能。默认值为 false。
readOnly：是否设置为只读模式，值可以是 true、false 或 "nocursor"（显示内容，但隐藏光标）。
tabSize：设置 Tab 缩进的空格数量，默认是 4。

2. 光标和选择

cursorBlinkRate：设置光标闪烁的速率，默认是 530 毫秒。如果设置为 0，光标将不闪烁。
cursorScrollMargin：光标接近编辑器顶部或底部时，滚动前保持的距离（单位为像素）。
cursorHeight：光标高度，0-1 的小数，默认值为 1 表示整个行高。
selectionPointer：当触摸设备上的指针按住选区时，显示不同的指针样式。

3. 自动补全和提示

extraKeys：允许自定义快捷键映射。可以定义键盘快捷键触发的功能。
hintOptions：自动提示相关配置，用于设置自动补全的行为。

4. 编辑行为

smartIndent：布尔值，是否在新行缩进时保持前一行的缩进。默认值为 true。
indentWithTabs：布尔值，是否使用 Tab 键进行缩进，默认值为 false。
electricChars：布尔值，是否在输入右括号、引号等字符时自动缩进。默认值为 true。
autoCloseBrackets：布尔值或配置对象，是否在输入括号或引号时自动补全。可以设置为 true、false 或指定自定义的括号匹配规则。
matchBrackets：布尔值或配置对象，是否高亮匹配的括号。

5. 滚动和布局

lineWrapping：布尔值，是否开启自动换行。
viewportMargin：默认值为 10。设置虚拟滚动的可见行数，以减少性能开销。
scrollbarStyle：设置滚动条的样式，如 native、null 等。

6. 事件监听

onChange：编辑器内容变化时触发的事件。
onCursorActivity：光标活动时触发的事件。
onKeyEvent：键盘事件时触发的事件，可以用来拦截或自定义某些按键的行为。
onFocus / onBlur：编辑器获得或失去焦点时触发的事件。

7. 高亮相关

styleActiveLine：布尔值，是否高亮当前行。
highlightSelectionMatches：布尔值或配置对象，是否高亮与当前选择匹配的所有其他实例。可用来实现选中关键词的批量高亮。

8. Linting

lint：布尔值或配置对象，是否开启 linting（代码检查）功能。需要额外的插件支持，如 ESLint 插件。

9. 代码折叠

foldGutter：布尔值，是否显示代码折叠按钮。
gutters：设置显示行号和折叠按钮等的边栏，可以是一个数组，用于自定义样式。

10. 高级配置

firstLineNumber：设置第一个行号，默认是 1。
lineSeparator：设置行分隔符，如 \n 或 \r\n。
configureMouse：自定义鼠标行为的配置对象。

这些配置项可以帮助你根据需求对 CodeMirror 编辑器进行高度自定义。在 Vue 项目中，可以将这些配置项封装在一个对象中并传入到 CodeMirror 实例的初始化选项中。

结语

CodeMirror 为 Web 应用中的代码编辑器提供了强大的支持，通过 Vue 3 的组合式 API 和生命周期管理，可以很方便地在项目中集成 CodeMirror 并实现扩展。本篇文章展示了 CodeMirror 在 Vue 3 中的基本应用，后续可以结合实际项目需求，进一步定制编辑器功能。

CodeMirror官网：CodeMirror

codemirror-editor-vue3地址：rennzhang/codemirror-editor-vue3: CodeMirror component for Vue3