React 中如何使用 Monaco

Monaco 是微软开源的一个编辑器，VSCode 也是基于 Monaco 进行开发的。如果在 React 中如何使用 Monaco，本文将介绍如何在 React 中引入 Monaco。

安装 React 依赖

yarn add react-app-rewired --dev
yarn add monaco-editor-webpack-plugin --dev
yarn add monaco-editor
yarn add react-monaco-editor

创建Webpack 配置文件并添加插件

在项目的根目录下创建 config-overrides.js

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

module.exports = function override(config, env) {
  config.plugins.push(new MonacoWebpackPlugin({
    languages: ['json']
  }));
  return config;
}

引入 Monaco 组件

核心函数 handleEditorDidMount，行选中时，在行尾添加一句话，通过事件监听函数 onDid