MonacoEditor 代码编辑器

React 可用的 Monaco Editor 组件

安装

该组件依赖 monaco-editor，使用前需安装：

建议版本 >= 0.22

npm i monaco-editor

同时，需要安装 monaco-editor-webpack-plugin：

注意 monaco-editor-webpack-plugin 版本需要与 monaco-editor 版本匹配 建议使用 webpack@5

npm i -D webpack monaco-editor-webpack-plugin

配置 webpack

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = () => ({
  // ...
  plugins: [
    new MonacoWebpackPlugin({
      // 所需支持的语言
      languages: ['javascript', 'markdown'],
      filename: 'monaco-[name].[contenthash:10].js',
    }),
  ],
  // ...
});