vue项目中，在线编辑器vue-codemirror、ace、和monaco的使用及踩坑记录

由于第一次使用代码编辑器插件，之前都没接触过，花了几天时间才做出来满意的，参考了好几个大佬的文章，大家有需要可以自行查找相关文章！另外文底也献上了个别的参考文章。

一、vue-codemirror 编辑器

vue2 版本

vue2 版本不支持最新的 vue-codemirror，所以要下载固定的版本 4.0.6，并且要搭配 codemirror 使用，codemirror 也不建议使用 6 以上的版本

pnpm add codemirror@5.65.12 vue-codemirror@4.0.6

然后在 main.js 中全局挂载 vuecodemirror

//codemirror
import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodemirror)

在要展示 codemirror 的页面，导入以下文件，包括有语言文件 JavaScript，主体样式 eclipse，和代码折叠所需的文件 fold/xxx

import {codemirror} from 'vue-codemirror'
import 'codemirror/theme/eclipse.css'
import "codemirror/mode/javascript/javascript.js";
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/xml-fold'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/indent-fold'
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/selection/active-line.js"

需要更改语言或者主体样式的，可以再 node_modules 里面找到相应文件 import 导入使用即可

添加配置项，这里存在一个 bug 就是自动补全括号无法实现，有看到的友友成功实现的话，可以评论区踢一下我

data () {
    return {
      curCode: '',
      cmOptions: {
        value: this.curCode,
        autorefresh: true,
        tabSize: 4, //tab 空格宽度
        mode: 'text/javascript',
        line: true,
        viewportMargin: Infinity, // 处理高度自适应时搭配使用
        highlightDifferences: true,
        spellcheck: true,
        autofocus: true,
        indentWithTab: true,
        smartIndent: true,
        styleActiveLine: true, // 设置光标所在行高亮
        showCursorWhenSelecting: true,
        lineNumbers: true, // 显示行号
        // matchBrackets: true, // 自动补全括号
        // autoCloseBrackets: true,
        foldGutter: true, // 代码折叠
        gutters: ["CodeMirror-linenumbers", 'CodeMirror-foldgutter'], 
        theme: "eclipse",
      },
      
    }
  },

最后就是使用了，大家也可以自行设置需要的样式

附上全部源码

效果图如下：

vue3 版本

需要下载最新版本的 vue-codemirror 和 codemirror

"vue-codemirror": "^6.1.1",

"codemirror": "^6.0.1",

紧接着下载语言包和主题包

# CodeMirror languages...
pnpm add @codemirror/lang-html
pnpm add @codemirror/lang-json
pnpm add @codemirror/lang-javascript

# CodeMirror themes...
pnpm add @codemirror/theme-one-dark

页面中使用的全部代码

在 main.js 全局中挂载并设置配置项

import {basicSetup} from 'codemirror'
import VueCodemirror from 'vue-codemirror'

const app = createApp()

app.use(VueCodemirror, {
  // optional default global options
  autofocus: true,
  disabled: false,
  indentWithTab: true,
  tabSize: 2,
  placeholder: 'Code goes here...',
  extensions: [basicSetup]
  // ...
})

想要白色背景的 codemirror，只要去掉 oneDark 主题就可以了，导入这个主题样式就是黑色背景

效果图如下：

还发现一个 bug 就是，在编辑状态的时候会自动添加一层虚线框，找了好久也没发现有设置样式，最后发现 overflow:hidden 可以隐藏掉虚线框，真是被自己蠢到了~

二、aceEditor 编辑器

下载：

pnpm add ace-builds

代码：参考的一个大佬的，但是文章被关掉了，大家可以自己去找找

效果图如下：

三、monaco 编辑器

这个插件和前面两种略有不同，右边会有一个小的回显，可以点击、拖动，类似 vscode

下载：这两个插件有版本对应要求，可以自行去查询

"monaco-editor": "^0.31.0",

"monaco-editor-webpack-plugin": "^7.1.0",

在 vue.config.js 中引入 monaco-editor-webpack-plugin，然后添加配置项

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [new MonacoWebpackPlugin(),
    ],
  }
})

代码：

这里使用了自定义语言，如果有需要使用官方语言如 javascript、python 等，把自定义语言开始到结束的部分去掉，然后将 language 语言支持换成 javascript 就可以啦。

效果图如下：

参考的大佬文章：

https://github.com/surmon-china/vue-codemirror

https://blog.csdn.net/weixin_43977534/article/details/123822431

https://www.cnblogs.com/wangjiahui/p/15524189.html

好啦，本人有点懒，文章写得可能还不够详细。