vue

2023-12-22 08:19| 来源: 网络整理| 查看: 265

最近工作中需要优化下之前的网页端代码编辑器。我作为后端开发，虽然做这个不专业，但也只能硬着头皮上啊，大量查阅资料，还是优化了一些内容的，在这里分享一下。如果有写的不对的地方，也请大家体谅下，毕竟纯手打很累的哈哈。

参考手册：

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

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

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 = 'A' && c { 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，否则在在输入的时候，当前还没输入完的单词也会高亮，很难受，如下图所示：

最终效果如下：

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

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

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：显示行数当然，还有很多有用的功能，不过我暂时够用了，其他也就懒得继续研究了。

【本文地址】

公司简介

联系我们