vue3项目中CodeMirror的复杂用法，实现自定义语法模式，手动在指定光标位置插入/获取/替换/绑定文本

需求描述

应产品要求实现一个手动插入文本，并自定义高亮区分输入内容，效果如下：

如要实现这个效果，首先我们需要自定义一个语法模式，然后我们需要获取光标的位置，并在光标的位置插入新的内容。

自定义语法模式

import { javascript } from "codemirror/mode/javascript/javascript";

export function defineCustomMode(CodeMirror) {
  CodeMirror.defineMode("custom-javascript", function(config, parserConfig) {
    const jsMode = CodeMirror.getMode(config, "text/javascript");

    return {
      startState: function() {
        return {
          jsState: jsMode.startState(),
        };
      },
      token: function(stream, state) {
        if (stream.match(/^$([^$]*)\]/)) {
          return "bracket-content";
        }

        if (stream.match(/^[A-Za-z_][A-Za-z0-9_]*(?=\s*$|\s*[({=;])/)) {
          return "english-word";
        }

        return jsMode.token(stream, state.jsState);
      },
      indent: jsMode.indent,
      electricInput: jsMode.electricInput,
      fold: jsMode.fold,
      closeBrackets: jsMode.closeBrackets,
    };
  });
}

实现讲解：

这段代码的主要目的是通过扩展 CodeMirror 的 JavaScript 模式，实现一个自定义的语言模式 (custom-javascript)。该模式在原有 JavaScript 语法高亮的基础上，添加了对特定格式内容的识别和样式处理功能。

1. 导入依赖

import { javascript } from "codemirror/mode/javascript/javascript";

• 这行代码从 codemirror 中导入了 JavaScript 模式的默认解析器（即 CodeMirror 内置的 JavaScript 模式）。
• javascript 是一个对象，包含 JavaScript 语言模式的基本配置和方法，比如语法解析、缩进规则等。

---

2. 定义 defineCustomMode 函数

export function defineCustomMode(CodeMirror) {

• defineCustomMode 是一个函数，接收一个参数 CodeMirror，这是 CodeMirror 的全局对象。
• 这个函数的作用是注册一个新的语言模式（mode），供后续使用。

---

3. 注册自定义语言模式

CodeMirror.defineMode("custom-javascript", function(config, parserConfig) {

• 使用 CodeMirror.defineMode() 方法注册一个新的语言模式，名为 "custom-javascript"。
• 这个函数返回一个对象，包含语言模式的配置和方法。

4. 初始化状态：startState

startState: function() {
  return {
    jsState: jsMode.startState(),
  };
},

• startState 是语言模式的一个标准方法，用于初始化解析器的状态。
• 在这里，它调用了原始 JavaScript 模式的 startState() 方法，并将结果保存到 jsState 属性中。
• 解析器的状态通常用于跟踪当前的语法上下文（例如是否在注释中、字符串中等）。

5. 语法高亮的核心：token 函数

token: function(stream, state) {

• token 是语言模式的核心方法，负责从输入流 stream 中读取字符，并为每个 token（如变量名、关键字、符号等）分配一个类别名称。
• 这些类别名称会映射到 CSS 类，从而控制显示的颜色和样式。

(1) 匹配方括号内的内容 [一级渠道]

if (stream.match(/^$([^$]*)\]/)) {
  return "bracket-content";
}

• 这是一个正则表达式，尝试匹配类似 [一级渠道] 的内容：
  • ^$$：匹配起始的左方括号 [。
  • ([^$$]*)：捕获任意数量的非右方括号字符（即方括号中的内容）。
  • \]：匹配结束的右方括号 ]。
• 如果匹配成功，返回 "bracket-content"，这是一个自定义的 token 类别。
• 这个类别可以被用来设置特定的样式（如蓝色字体）。

(2) 匹配英文单词和标识符 ROW_MAX()

if (stream.match(/^[A-Za-z_][A-Za-z0-9_]*(?=\s*$|\s*[({=;])/)) {
  return "english-word";
}

• 这是一个正则表达式，尝试匹配以字母或下划线开头的标识符（如变量名、函数名等）：
  • ^[A-Za-z_]：匹配以字母或下划线开头。
  • [A-Za-z0-9_]*：匹配零个或多个字母、数字或下划线。
  • (?=\s*$|\s*[({=;])：确保后面紧跟的是空格或结束，或者是符号 (、)、{、}、=、; 等。
• 如果匹配成功，返回 "english-word"，这是一个自定义的 token 类别。
• 这个类别可以被用来设置特定的样式（如紫色字体）。

(3) 回退到原始 JavaScript 模式

return jsMode.token(stream, state.jsState);

• 如果以上两种情况都没有匹配成功，则调用原始 JavaScript 模式的 token 方法进行处理。
• 这样可以保留原有的 JavaScript 语法高亮功能。

6. 复用其他功能

indent: jsMode.indent,
electricInput: jsMode.electricInput,
fold: jsMode.fold,
closeBrackets: jsMode.closeBrackets,

• 这些属性直接复用了原始 JavaScript 模式的配置：
  • indent：控制自动缩进逻辑。
  • electricInput：控制某些特殊字符（如 } 或 )）触发自动格式化。
  • fold：支持代码折叠功能。
  • closeBrackets：支持自动闭合括号。

这些配置使得自定义模式不仅支持语法高亮，还能继承原始 JavaScript 模式的行为特性。

---

总结

这段代码通过以下步骤实现了增强的 JavaScript 模式：

1. 基于内置的 JavaScript 模式，创建了一个新的自定义模式。
2. 添加了两个自定义 token 规则：
   • 方括号内的内容（如 [一级渠道]）标记为 "bracket-content"。
   • 英文标识符（如 ROW_MAX()）标记为 "english-word"。
3. 回退到原始 JavaScript 模式，处理其他未匹配的内容。
4. 复用了 JavaScript 模式的其他行为特性，如缩进、代码折叠等。

最终效果是：你可以通过 CSS 为这些自定义 token 设置不同的颜色，从而实现更丰富的语法高亮体验。

在组件中使用自定义模式

custom-js-mode

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="test placeholder"
    :height="200"
    :width="500"
    @change="change"
  />
</template>

<script>
import Codemirror from "codemirror-editor-vue3";

// placeholder
import "codemirror/addon/display/placeholder.js";

// language
import "codemirror/mode/javascript/javascript.js";
// placeholder
import "codemirror/addon/display/placeholder.js";
// theme
// import "codemirror/theme/dracula.css";
import "codemirror/theme/dracula.css";

// 引入自定义模式
import { defineCustomMode } from "./custom-js-mode"; // 替换为你实际路径

// 注册自定义模式
defineCustomMode(window.CodeMirror);

import { ref } from "vue";
export default {
  components: { Codemirror },
  setup() {
    const code = ref(`
    [一级渠道]ROW_MAX()`);

    return {
      code,
      cmOptions: {
        // mode: "log", // Language mode
        // theme: "default", // Theme
        // mode: "text/javascript", // Language mode
        // theme: "dracula", // Theme
        mode: "custom-javascript", // Language mode
        theme: "dracula", // Theme
      },
    };
  },
};
</script>
<style>
  /* 在 style 部分添加以下样式 */
.cm-s-dracula span.cm-variable {
  color: rgba(141,213,121,0.8) !important;
}

.cm-s-dracula span.cm-english-word {
  color: rgba(216,78,224,0.8) !important;
}
</style>

获取光标位置并插入内容

在 CodeMirror 中，如果你想在光标位置手动插入内容，可以使用 replaceSelection 方法。这个方法允许你替换当前选中的文本或在光标位置插入新的文本。如果没有选中的文本，它将在当前光标位置插入文本。

这里是如何操作的示例：

示例代码

// 假设你已经有了一个CodeMirror实例，名为editor
var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
    // 配置选项...
});

// 插入文本到当前光标位置
function insertTextAtCursor(text) {
    editor.replaceSelection(text);
}

// 调用函数插入文本
insertTextAtCursor("要插入的文本");

详细说明

• replaceSelection(text, collapse):
  • 第一个参数 text 是你想要插入的字符串。
  • 第二个参数（可选）collapse 指定在插入后如何处理光标。它可以是 "start"、"end" 或者 null（默认值）。如果设置为 "start"，光标将位于插入文本的开头；如果是 "end"，则光标会位于插入文本的末尾；如果为 null，则保持选择状态（如果有）或者置于插入文本的结尾。

在特定行和列插入文本

如果你需要在一个具体的行和列位置插入文本，而不是直接在光标位置，你可以先定位到那个位置，然后使用类似的方式插入文本。这可以通过 setCursor 方法实现：

// 移动光标到指定行和列(从0开始计数)
var line = 1; // 目标行号
var column = 5; // 目标列号
editor.setCursor(line, column);

// 然后插入文本
editor.replaceSelection("新文本");

注意事项

• 如果你需要确保用户不会丢失他们的选择（比如他们可能已经选择了某些文本），你应该首先保存当前的选择，执行你的插入操作，然后再恢复选择。
• replaceSelection 方法非常适合用于简单的插入操作。如果你的需求更加复杂（例如基于某种条件动态决定插入位置），你可能需要更深入地了解 CodeMirror 的 API，如获取当前文档的状态、遍历文档等高级功能。

安装和帮助文档可以查看另一篇文章：vue3项目中使用CodeMirror，中文帮助文档，使用手册