基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用

最近有个需求是显示日志模块的信息，用了好多在线代码编辑器，如各式各样的 markdown 啥的，都不太好使......

最后发现微软的 Monaco Editor 在线代码编辑器，这个插件就是牛！对此进行基于Vue2.X/Vue3.X的封装和使用。

// 查看 xxx 版本
格式：npm view xxx versions --json
举例：npm view monaco-editor versions --json

// monaco-editor 插件，必须
npm install monaco-editor --save-dev

// monaco-editor-webpack-plugin 插件，非必须
npm install monaco-editor-webpack-plugin --save-dev

// monaco-editor-nls 插件，非必须
npm install monaco-editor-nls --save-dev

// monaco-editor-esm-webpack-plugin 插件，非必须
npm install monaco-editor-esm-webpack-plugin --save-dev

// 引入 font-awesome 图标库，非必须
npm install font-awesome --save

父组件：index.vue

子组件：monacoEditor.vue

最终效果：

以上代码在Vue3.X项目运行是有点问题的，页面会卡死，因为Vue3不再暴露子组件实例的属性和方法，但是却可以用toRaw方法获取到原始数据，也就是可以获取到子组件的实例，自然也就可以获取到实例的属性和方法。

例如获取编辑器内容方法，this.editor改为toRaw(this.editor)即可，还有其他方法也要改一下哦。

// 引入获取原始数据组件
import { toRaw } from 'vue'

/**
 * 获取编辑器的内容
 */
getEditorContent() {
  toRaw(this.editor).getValue();
},

好了，本次分享就到这里。