vue-codemirror代码编辑器使用心得和踩坑总结，一路走来我累了

Bertha 。 2023-10-09 18:24 3阅读 0赞

![2c248692bc0f4960a5dea0fe327cfee3.png][]

## 参考手册： ##

vue-codemirror github 地址： https://github.com/surmon-china/vue-codemirror  
codemirror 中文文档：https://olindk.gitbooks.io/codemirror/content/configuration.html  
codemirror 英文文档：https://codemirror.net/doc/manual.html\#config  
vue-codemirror 官方示例：[vue-codemirror | Homepage][vue-codemirror _ Homepage]

如何引入 vue-codemirror 就不详细写了，之前已经写过一篇了：[https://xiaoshen.blog.csdn.net/article/details/129012390][https_xiaoshen.blog.csdn.net_article_details_129012390]。在 vue-codemirror gitbub 中也有简单教程，此文章只列举一些我认为挺有用的功能。

## options配置 ##

codemirror 中最重要的就是配置，这里先贴出来我用的配置。

cmOptions: {
    	theme: 'monokai',
    	mode: '',
    	readOnly: false,
    	tabSize: 4, // 制表符
    	indentUnit: 2, // 缩进位数
    	lineNumbers: true,
    	ineWiseCopyCut: true,
    	viewportMargin: 1000,
    	autofocus: true,
    	autocorrect: true,
    	spellcheck: true,
    	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
    	},
    	extraKeys: {
    	  Tab: (cm) => {
    		if (cm.somethingSelected()) {      // 存在文本选择
    		  cm.indentSelection('add');    // 正向缩进文本
    		} else {                    // 无文本选择
    		  cm.replaceSelection(Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");  // 光标处插入 indentUnit 个空格
    		}
    	  },
    	},
    	lint: false,
    	// 代码折叠
    	gutters: [
    	  "CodeMirror-lint-markers",
    	  "CodeMirror-linenumbers",
    	  "CodeMirror-foldgutter"
    	],
    	lineWrapping: false,
    	foldGutter: true, // 启用行槽中的代码折叠
    	autoCloseBrackets: true, // 自动闭合符号
    	autoCloseTags: true,
    	matchTags: { bothTags: true },
    	matchBrackets: true, // 在光标点击紧挨{、]括号左、右侧时，自动突出显示匹配的括号 }、]
    	styleSelectedText: true,
    	styleActiveLine: true,
    	autoRefresh: true,
    	highlightSelectionMatches: {
    	  minChars: 2,
    	  trim: true,
    	  style: "matchhighlight",
    	  showToken: false
    	},
    	hintOptions: {
    	  completeSingle: false
    	}
    }

**1）代码自动提示和补全**

代码提示和补全功能，需要引入 codemirror/addon/hint 目录中的如下文件

import 'codemirror/addon/hint/show-hint.css'
    import 'codemirror/addon/hint/show-hint.js'
    import 'codemirror/addon/hint/javascript-hint'
    import 'codemirror/addon/hint/xml-hint'
    import 'codemirror/addon/hint/sql-hint'
    import 'codemirror/addon/hint/anyword-hint'

开启ready事件输入监听，才会有代码提示：

<codemirror
      ref="myCm"
      v-model="content"
      :options="cmOptions"
      @ready="onCmReady"
      @blur="onCmBlur"
      @mousedown.native="onMouseDown">
    </codemirror>
     
    onCmReady(cm) {
      // 这里的 cm 对象就是 codemirror 对象，等于 this.$refs.myCm.codemirror 
      cm.on("inputRead", (cm, obj) => {
        if (obj.text && obj.text.length > 0) {
        let c = obj.text[0].charAt(obj.text[0].length - 1)
          if ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')) {
            cm.showHint({ completeSingle:false })
          }
        }
      })
    }

代码提示需要一个事件，我这里用的是 inputRead 事件（也可以用别的事件，效果会略微不同），当监听到输入时，判断是否需要提示，所以要在编辑器初始化完成时，启动这个监听，这里只监听了英文字母的输入。编辑器初始化好后会触发 @ready 事件，在 onCmReady 方法中监听 inputRead 事件。然后只要有英文字母输入，就会监听到，自动调用 cm 的 showHint 方法进行提示。

## 提示框的层级问题 ##

基本上增加了如上内容后，在编写代码时就有提示功能了，但是我遇到个问题就是提示框不出来，但是在源码中加日志后发现提示文本是有打印且正确的，后来发现是层级问题。找到提示框的样式如下，默认的 z-index 是10，太小了，我改到超过2000后才能显示出来。

.CodeMirror-hints {
      position: absolute;
      z-index: 10;
      overflow: hidden;
      list-style: none;
     
      margin: 0;
      padding: 2px;
     
      -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
      -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
      box-shadow: 2px 3px 5px rgba(0,0,0,.2);
      border-radius: 3px;
      border: 1px solid silver;
     
      background: white;
      font-size: 90%;
      font-family: monospace;
     
      max-height: 20em;
      overflow-y: auto;
    }

最终的效果：![41154795bd5b449c9b01b6573c31bac9.png][]

**2）代码折叠**

代码折叠同样是个非常重要的功能，需要引入如下文件。最后那个 indent-fold 不要漏了，我就是因为漏了这文件，发现 python 代码无法折叠，debug了很久源码才找到原因，浪费了很多时间！当然，如果用不到的话可以不引入。

import 'codemirror/addon/fold/foldgutter.css'
    import 'codemirror/addon/fold/foldcode'
    import 'codemirror/addon/fold/foldgutter'
    import 'codemirror/addon/fold/brace-fold'
    import 'codemirror/addon/fold/comment-fold'
    import 'codemirror/addon/fold/markdown-fold'
    import 'codemirror/addon/fold/xml-fold'
    import 'codemirror/addon/fold/indent-fold'

几个重要的参数如下：

// 代码折叠
    gutters: [
      "CodeMirror-lint-markers",
      "CodeMirror-linenumbers",
      "CodeMirror-foldgutter"
    ],
    foldGutter: true, // 启用行槽中的代码折叠

做完这些配置后，代码就应该可以折叠了，无需额外写 js。

#### 3）以小红点方式显示空格 ####

两个重要的配置：

specialChars ：正则表达式，用于描述哪些特殊字符应该被替换为special placeholder。通常用于无法打印的特殊字符。默认为/\[\\u0000-\\u001f\\u007f\\u00ad\\u200b-\\u200f\\u2028\\u2029\\ufeff\]/。

specialCharPlaceholder ：当传入一个与specialChars匹配的字符时，返回一个用于替换的DOM节点。默认为一个红色的点(·)

这个功能也挺有意思的，其实开启的话很简单，只要增加 specialChars 参数，正则中加上空格就行了，但是呢，默认的样式很丑，是个很大很深的红点，如下图所示：  
![fcda2f5f7d46433086987826b7fd84c3.png][]

所以呢必须要改，那么查看 codemirror.js 源码，下面贴出关键的部分：

根据源码中的 defaultSpecialCharPlaceholder 和 elt 两个方法，我自定义了specialCharPlaceholder 的配置，用于替代默认的空格样式。这里去掉了一些我用不到的，比如非字符串的校验等。然后将大的点替换成了小的点，编码为 \\u002e ，自定义的配置如下：

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
    }

这里specialChars我默认没改的，因为我想要的效果是默认不显示红点，当我想显示红点时再开启。所以我增加了一个开关，当设置为true时， 在 specialChars 的正则中增加 \\s （\\s表示空格），这样空格就能显示为我想要的小红点了。

并且对 cm-invalidchar 的样式也改了下，颜色修改为淡点的红色，颜色代码为：\#909399

最终的样式如下：  
![16944499587b4ef4a8f90756a8de8a83.png][]

**4）制表符替换为4个空格**

options中增加 extraKeys 配置，修改默认的tab行为。至于替换为几个空格数，是由参数 indentUint 控制的。

代码如下，这段是很久以前刚弄这个编辑器时，从某篇文章中借鉴的。

extraKeys: {
      Tab: (cm) => {
    	if (cm.somethingSelected()) {      // 存在文本选择
    	  cm.indentSelection('add');    // 正向缩进文本
    	} else {                    // 无文本选择
    	  cm.replaceSelection(Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");  // 光标处插入 indentUnit 个空格
    	}
      }
    }

**5）选中单词后，其他相同单词也高亮**

需要引入如下文件并增加 option 配置：

import 'codemirror/addon/search/match-highlighter'
     
    highlightSelectionMatches: {
      minChars: 2,
      trim: true,
      style: "matchhighlight",
      showToken: false
    },

highlightSelectionMatches中 的 showToken 最好配置为 false，否则在在输入的时候，当前还没输入完的单词也会高亮，很难受，如下图所示：![67d935572a6a441785d0c757a6cee23f.png][]

最终效果如下：

这里高亮的样式我是改过的，为了适应这个主题，我重新了 cm-matchhighlight 的样式，修改了它的背景颜色：

.cm-matchhighlight {
      background: #848484 !important
    }

![a75e63fc4cdc4c268b02dd64edc382ae.png][]

**6）自动补全括号，且****光标在括号左右侧时，自动突出匹配的括号**

引入如下文件并增加 option 参数：

import 'codemirror/addon/edit/matchbrackets'
    import 'codemirror/addon/edit/closebrackets'
     
    autoCloseBrackets: true, // 自动闭合符号
    matchBrackets: true, // 在光标点击紧挨{、]括号左、右侧时，自动突出显示匹配的括号 }、]

**7）其他有用配置**

当然，还有很多有用的功能，不过我暂时够用了，其他也就懒得继续研究了。

theme：主题样式，我用的monakai，这个就看个人喜好了
    mode：这个很重要，不同的语言要使用对应的mode，这样才能有关键字的高亮！mode列表在中英文手册中可以查
    lineWrapping：这个要配置为 false，如果配置为true，样式会比较奇怪，原因未知，或许跟我用的monakai主题有关？有知道的人可以告诉我下。
    readOnly：决定是否只读
    viewportMargin：一次加载多少行，防止文件过大页面卡死
    lineNumbers：显示行数

[2c248692bc0f4960a5dea0fe327cfee3.png]: https://img-blog.csdnimg.cn/2c248692bc0f4960a5dea0fe327cfee3.png
[vue-codemirror _ Homepage]: https://github.surmon.me/vue-codemirror
[https_xiaoshen.blog.csdn.net_article_details_129012390]: https://xiaoshen.blog.csdn.net/article/details/129012390
[41154795bd5b449c9b01b6573c31bac9.png]: https://img-blog.csdnimg.cn/41154795bd5b449c9b01b6573c31bac9.png
[fcda2f5f7d46433086987826b7fd84c3.png]: https://img-blog.csdnimg.cn/fcda2f5f7d46433086987826b7fd84c3.png
[16944499587b4ef4a8f90756a8de8a83.png]: https://img-blog.csdnimg.cn/16944499587b4ef4a8f90756a8de8a83.png
[67d935572a6a441785d0c757a6cee23f.png]: https://img-blog.csdnimg.cn/67d935572a6a441785d0c757a6cee23f.png
[a75e63fc4cdc4c268b02dd64edc382ae.png]: https://img-blog.csdnimg.cn/a75e63fc4cdc4c268b02dd64edc382ae.png