Monaco Editor 使用

文章目录

• Monaco Editor 使用
• • 安装依赖
  • • • 版本问题
      • • vue2
        • Vue3
    • webpack-dev-server
    • monaco-editor-webpack-plugin
    • • Version Matrix
  • 集成步骤
  • • Vue2 配置 monaco-editor-webpack-plugin 插件
    • Vue3 vue.config.js
    • 测试页面实例
    • 属性说明
    • 支持的语言类型
  • 报错解决
  • • 控制台报错
  • 效果图
  • 源代码地址

• Monaco Editor是 VS Code底层的代码编辑器，开源协议是MIT，支持Edge、 Chrome、Firefox、Safari和Opera浏览器，但是不支持移动端浏览器或移动端框架。
• VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块，你可以将Monaco Editor用到自己的项目中，作为云端编辑器的支持。

安装依赖

版本问题

vue2

• 注意版本问题：版本问题很坑爹

"monaco-editor": "^0.30.1",
"monaco-editor-webpack-plugin": "^6.0.0",
"webpack": "^3.6.0",

Vue3

npm install monaco-editor --save
npm install monaco-editor-webpack-plugin --save   //必须局部安装,不能全局安装否则会导致代码不高亮,不补全

webpack-dev-server

webpack-dev-server v4.0.0+ 要求 node >= v12.13.0、webpack >= v4.37.0（但是我们推荐使用 webpack >= v5.0.0）和 webpack-cli >= v4.7.0。

monaco-editor-webpack-plugin

• 官网：https://www.npmjs.com/package/monaco-editor-webpack-plugin

Version Matrix

集成步骤

Vue2 配置 monaco-editor-webpack-plugin 插件

• webpack.config.js增加插件配置

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

Vue3 vue.config.js

let MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
// vue.config.js
const vueConfig = {configureWebpack: {// webpack pluginsplugins: [// Ignore all locale files of moment.jsnew MonacoWebpackPlugin()],// if prod, add externals},
}

测试页面实例

属性说明

{value: '', // 编辑器初始显示文字language: 'javascript', // 语言javascript | jsonautomaticLayout: true, // 自动布局theme: 'vs', // 官方自带三种主题vs, hc-black, or vs-darkfoldingStrategy: 'indentation', // 代码可分小段折叠overviewRulerBorder: false, // 不要滚动条的边框lineNumbers: 'off', // 控制行号的出现on | offscrollbar: { // 滚动条设置verticalScrollbarSize: 4, // 竖滚动条horizontalScrollbarSize: 6, // 横滚动条},readOnly: false, // 是否只读 Defaults to false | trueminimap: { // 关闭小地图enabled: false,},cursorStyle: 'line', // 光标样式automaticLayout: false, // 自动布局fontSize: 14, // 字体大小tabSize: 2, // tab缩进长度autoIndent: true, // 自动布局
}

支持的语言类型

报错解决

• 注意版本对应

控制台报错

• 版本问题
• 报错如下：

editorSimpleWorker.js?db2f:450 Uncaught (in promise) Error: Unexpected usageat EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?db2f:450:1)at eval (webWorker.js?0a43:38:1)

• 解决方法

// import * as monaco from 'monaco-editor';// 使用下面的方式引入
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
// 代码高亮
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
// 引入查找控件
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js' 

效果图

源代码地址

• 码云：https://gitee.com/Marlon_Brando/qianduanxuexi/tree/develop/monaco-editor
• https://gitee.com/Marlon_Brando/qianduanxuexi/tree/develop/monaco-editor-vue3