在vue中实现在线代码编辑器之CodeMirror

# 前言

由于项目需求，需要完成一个支持代码提示、代码校验、代码格式化的页面代码编辑器

1 技术选型

精力有限，只了解了几个主流的编辑器codemirror、ace、Monaco Editor、vue-web-terminal等等。本文只介绍codemirror的使用。

2 使用效果

先上效果图：

再看下有内容的效果：

 虽然比较简单，但是最基本的缩进、高亮显示、缩放展开等基础功能还是有的。其实还包含了许多文件类型的语法校验。

后续使用中发现，给这个编辑器的内容赋值时，开头总是有个小红点。而经过反复检查传递的文件内容，并没有小红点，这个小红点也不会加在内容中传递出去，于是我发现codemirror的一些比较常用的配置项。

3 代码实现

先看实际我使用的配置项：

data() {
    return {
      value: '',
      /** @type {import('@types/codemirror/index').EditorConfiguration} */
      codemirrorOptions: {
        // specialChars: '/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/',  //默认值
        // specialCharPlaceholder: '', //默认值
        // eslint-disable-next-line no-control-regex
        // specialChars: /[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff\ufff9-\ufffc]/g,
        // specialCharPlaceholder: function (ch) {
        //   let token = document.createElement("span");
        //   let content = "\u002e";
        //   token.className = "cm-invalidchar";
        //   if (typeof content == "string") {
        //     token.appendChild(document.createTextNode(content));
        //   }
        //   token.title = "\\u" + ch.charCodeAt(0).toString(16);
        //   token.setAttribute("aria-label", token.title);
        //   return token
        // },
        // 语言及语法模式
        mode: 'text/x-yaml',
        smartIndent: true,
        // 主题
        theme: 'neat',
        // 显示函数
        line: true,
        // 显示行号
        lineNumbers: true,
        // 软换行
        lineWrapping: true,
        // tab宽度
        tabSize: 6,
        fontSize: 20,
        fontFamily: 'monospace',
        // // 允许拖入的文件类型
        // cursorScrollMargin: 5,
        // extraKeys: {},
        // 高亮行功能
        styleActiveLine: true,
        // 调整scrollbar样式功能
        // scrollbarStyle: 'overlay',
        // 自动括号匹配功能
        matchBrackets: true,
        autofocus: true,
        autoRefresh: true,
        // #region 代码折叠
        foldGutter: true,
        // foldOptions: { scanUp: true },
        gutters: [
          'CodeMirror-linenumbers',
          'CodeMirror-foldgutter',
          'CodeMirror-lint-markers',
        ],
        height: 'auto',
        // #endregion
        showHint: true,
        lint: true,
        hintOptions: {
          // 避免由于提示列表只有一个提示信息时，自动填充
          completeSingle: false,
        },
      },
    };
  },

然后我再给大家罗列一些我可能没用到的 ，但是你可能会用到的配置项：

4 options 配置项说明

注：vue-codemirror中options配置项和codemirror一样！

• value: string|CodeMirror.Doc 编辑器的起始值。可以是字符串，也可以是文档对象。

• mode: string|object 使用的模式。如果没有给出，默认为加载第一个模式。它可以是一个字符串，可以简单地命名模式，也可以是与模式关联的MIME类型。或者，它可以是包含模式配置选项的对象，具有name命名模式的属性（例如{name: “javascript”, json: true}）。每种模式的演示页面都包含有关模式支持的配置参数的信息。可以通过检查CodeMirror.modes 和CodeMirror.mimeModes对象来询问CodeMirror已定义了哪些模式和MIME类型。第一个将模式名称映射到它们的构造函数，第二个将MIME类型映射到模式规范。

• lineSeparator: string|null 显式设置编辑器的行分隔符。默认情况下（值null），文档将在CRLF以及单独的CR和LF上拆分，并且单个LF将在所有输出中用作行分隔符（例如getValue）。给定特定字符串时，只会在该字符串上拆分行，默认情况下，输出将使用相同的分隔符。

• theme: string 编辑器设计样式的主题。必须确保.cm-s-[name] 已加载定义相应样式的CSS文件（请参阅theme分发中的目录）。默认值为"default"，包含的颜色codemirror.css。它可以使用多个主题化，例如"foo bar"将同时分配cm-s-foo和cm-s-bar类编辑器。

• indentUnit: integer 一个块（编辑语言中的含义）应缩进多少个空格。默认值为2。

• smartIndent: boolean 是否使用模式提供的上下文相关缩进（或者只是缩进与之前的行相同）。默认为true。

• tabSize: integer 制表符的宽度。默认为4。

• indentWithTabs: boolean 在缩进时，是否tabSize 应该用N个制表符替换前N *个空格。默认值为false。

• electricChars: boolean 配置编辑器在键入可能更改其正确缩进的字符时，是否应重新缩进当前行（仅在模式支持缩进时才有效）。默认为true。

• specialChars: RegExp 用于确定哪些字符应由特殊占位符替换的正则表达式。非常适用于非打印特殊字符。默认是/[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff]/。

• specialCharPlaceholder: function(char) → Element 给定由specialChars 选项标识的特殊字符的函数，生成用于表示字符的DOM节点。默认情况下，会显示一个红点（•），并带有标题工具提示以指示字符代码。

• direction: “ltr” | "rtl" 翻转整体布局并选择基本段落方向为从左到右或从右到左。默认为“ltr”。CodeMirror将Unicode双向算法应用于每一行，但不自动检测基本方向 - 它设置为所有行的编辑器方向。当基本方向与用户意图不匹配时，生成的顺序有时会出错（例如，前导和尾随标点跳转到行的错误一侧）。因此，允许用户切换此选项对多语言输入很有帮助。

• rtlMoveVisually: boolean 确定通过从右到左（阿拉伯语，希伯来语）文本的水平光标移动是否是可视的（按向左箭头向左移动光标）或逻辑（按向左箭头移动到字符串中的下一个较低索引，这在视觉上是正确的从右到左的文字）。默认设置false 在Windows上，true在其他平台上。

• keyMap: string 配置要使用的键映射。默认值是"default"，这是唯一定义的键映射codemirror.js。key map目录中可以找到额外的键映射。有关详细信息，请参阅关键映射部分。

• extraKeys: object 可用于为编辑器指定额外的键绑定，以及由其定义的绑定keyMap。应为null或有效的键映射值。

• configureMouse: fn(cm: CodeMirror, repeat: “single” | “double” | “triple”, event: Event) → Object 允许您配置鼠标选择和拖动的行为。按下鼠标左键时调用该函数。返回的对象可能具有以下属性：

• unit: “char” | “word” | “line” | “rectangle” | fn(CodeMirror, Pos) → {from: Pos, to: Pos} 选择的单位。对于自定义单元，可以是内置单元之一，也可以是一个位置并返回其范围的函数。默认设置是返回"word"双击，"line"三次点击，“rectangle"alt-clicks（或Chrome操作系统，元移位点击）等"single” 。

• extend: bool 是否扩展现有选择范围或开始新选择范围。默认情况下，单击班次时会启用此功能。

• addNew: bool 启用后，这会为现有选择添加新范围，而不是替换它。默认行为是在Mac OS上为命令单击启用此功能，并在其他平台上按住Control键单击。

• moveOnDrag: bool 当鼠标甚至拖动编辑器内部的内容时，它控制是复制（false）还是移动（true）。默认情况下，通过在Mac OS上单击鼠标右键并在其他位置按住Ctrl键单击来启用此功能。

• lineWrapping: boolean CodeMirror是否应滚动或换行以排长行。默认为false（滚动）。

• lineNumbers: boolean 是否在编辑器左侧显示行号。

• firstLineNumber: integer 在哪个数字开始计数行。默认值为1。

• lineNumberFormatter: function(line: integer) → string 用于格式化行号的函数。该函数传递给行号，并应返回将在装订线中显示的字符串。

• gutters: array < string> 可用于添加额外的排水沟（超出或代替行号排水沟）。应该是一个CSS类名称数组，每个类名称定义一个width（和可选的背景），并将用于绘制排水沟的背景。可以包括CodeMirror-linenumbers类，以便明确设置行号装订线的位置（它将默认为所有其他装订线的右侧）。这些类名是传递给的键setGutterMarker。

• fixedGutter: boolean 确定装订线是否水平滚动内容（false）或在水平滚动期间是否保持固定（true，默认值）。

• scrollbarStyle: string 选择滚动条实现。默认为"native"，显示本机滚动条。核心库还提供了"null"完全隐藏滚动条的样式。插件可以实现其他滚动条模型。

• coverGutterNextToScrollbar: boolean 当fixedGutter 打开时，并且存在水平滚动条，默认情况下，此滚动条左侧将显示装订线。如果此选项设置为true，则它将由具有类的元素覆盖CodeMirror-gutter-filler。

• inputStyle: string 选择CodeMirror处理输入和焦点的方式。核心库定义"textarea" 和"contenteditable"输入模式。在移动浏览器上，默认为"contenteditable"。在桌面浏览器上，默认为"textarea"。在"contenteditable"模型中支持IME和屏幕阅读器更好。目的是使其成为未来现代桌面浏览器的默认设置。

• readOnly: boolean|string 这会禁止用户编辑编辑器内容。如果"nocursor"给出特殊值（而不是简单true），则不允许对编辑器进行聚焦。

• showCursorWhenSelecting: boolean 选择是否处于活动状态时是否应绘制光标。默认为false。

• lineWiseCopyCut: boolean 启用时（默认情况下），在没有选择时执行复制或剪切将复制或剪切其上有游标的整行。

• pasteLinesPerSelection: boolean 当从外部源（而不是编辑器本身）粘贴某些内容时，如果行数与选择的数量相匹配，则CodeMirror将默认为每个选择插入一行。可以将其设置false为禁用该行为。

• selectionsMayTouch: boolean 确定多个选择是在触摸时（默认值）还是仅在它们重叠时（true）连接。

• undoDepth: integer 编辑器存储的最大撤消级别数。请注意，这包括选择更改事件。默认为200。

• historyEventDelay: integer 键入或删除时将导致新历史事件开始的不活动时间（以毫秒为单位）。默认为1250。

• tabindex: integer 要分配给编辑器的选项卡索引。如果没有给出，则不会分配选项卡索引。

• autofocus: boolean 可用于使CodeMirror将焦点集中在初始化上。默认为关闭。当fromTextArea使用when时，并且没有给出该选项的显式值，当源textarea被聚焦时，它将被设置为true，或者它具有autofocus属性而没有聚焦其他元素。

• phrases: object 某些插件通过该phrase 方法运行用户可见的字符串（例如界面中的标签）以允许翻译。此选项确定该方法的返回值。如果它为null或者没有输入字符串命名的属性的对象，则返回该字符串。否则，返回与该字符串对应的属性的值。

• dragDrop: boolean 控制是否启用拖放。默认开启。

• allowDropFileTypes: array< string> 设置（默认为null）时，只能将类型在数组中的文件放入编辑器中。字符串应该是MIME类型，并将根据浏览器报告type 的File对象进行检查。

• cursorBlinkRate: number 用于光标闪烁的半周期（以毫秒为单位）。默认闪烁率为530毫秒。通过将此值设置为零，可以禁用闪烁。负值完全隐藏光标。

• cursorScrollMargin: number 当接近可滚动文档中可见视图的顶部或底部时，总是在光标上方和下方留出多少额外空间。默认值为0。

• cursorHeight: number 确定光标的高度。默认值为1，表示它跨越线的整个高度。对于某些字体（以及某些品味）较小的高度（例如0.85），导致光标无法一直到达线的底部，看起来更好

• resetSelectionOnContextMenu: boolean 控制当在当前选择之外单击打开上下文菜单时，是否将光标移动到单击点。默认为true。

• workTime, workDelay: number 突出显示由伪背景线程完成，该线程将工作workTime毫秒，然后使用超时睡眠workDelay毫秒。默认值为200和300，您可以更改这些选项以突出显示或多或少的激进。

• pollInterval: number 指示CodeMirror应该如何快速轮询其输入textarea以进行更改（聚焦时）。大多数输入都是由事件捕获的，但某些内容（如某些浏览器上的IME输入）不会生成允许CodeMirror正确检测它的事件。因此，它民意调查。默认值为100毫秒。

• flattenSpans: boolean 默认情况下，如果相邻标记具有相同的类，则它们会将相邻标记合并为单个跨度。这将导致更简单的DOM树，从而表现更好。使用某些样式（例如圆角），这将改变文档的外观。您可以将此选项设置为false以禁用此行为。

• addModeClass: boolean 启用时（默认情况下为off），将为每个标记添加一个额外的CSS类，指示生成它的（内部）模式，前缀为"cm-m-"。例如，来自XML模式的标记将获得cm-m-xml该类。

• maxHighlightLength: number 当突出显示长行时，为了保持响应，编辑器将放弃并简单地将行的其余部分设置为纯文本，当它到达某个位置时。默认值为10 000.您可以将其设置Infinity为关闭此行为。

• viewportMargin: integer 指定在当前滚动到视图中的文档部分上方和下方呈现的行数。这会影响滚动时所需的更新量以及此类更新所做的工作量。您通常应该将其保留为默认值10.可以设置为Infinity确保始终呈现整个文档，因此浏览器的文本搜索会对其进行处理。这将对大文档的性能产生不良影响。

5 踩坑记录

由于发现了小红点其实是配置项中默认转义而出现的，所以我在该vue中加上了以下样式，这样就可以去掉碍眼的小红点了：

//屏蔽开头的小红点
.cm-invalidchar {
  display: none;
}

这样直接就把 转义出现的小红点这个区域直接屏蔽掉了。其实这个对于我的文件内容是没有任何影响的，不用担心文件内容会出现问题。

6 总结

以上就是我使用codemirror的一些经验，我是通过页面集成了vue-codemirror，来实现了一个在页面上的代码编辑器，从而可以方便的编辑和查看某些配置文件。