推荐使用 @monaco-editor/react，基于 react 封装

对于企业级应用来说，依赖三方 cdn 是个潜在的风险点，
私有化部署需求，把 paths.vs 配本地，同时用 copy-webpack-plugin 复制 monaco-editor 相应代码到产物目录

  1. import React, { useRef } from 'react';
  2. import Editor, { loader } from '@monaco-editor/react';
  4. const loaderConfig = {
  5.   'vs/nls': {
  6.     availableLanguages: {
  7.       '*': 'zh-cn',
  8.     },
  9.   },
  10.   paths: {
  11.     // 根据需要调整版本和产物类型
  12.     // https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs
  13.     vs: 'https://gw.alipayobjects.com/os/lib/monaco-editor/0.34.0/min/vs',
  14.   },
  15. };
  17. loader.config(loaderConfig);
  19. function MonacoEditor () {
  20.   const editorRef = useRef(null);
  22.   function onEditorDidMount(editor, monaco) {
  23.     console.log('editor', editor, monaco)
  24.     editorRef.current = editor;
  25.   }
  27.   function onEditorChange(value, event) {
  28.     console.log('here is the current model value:', value);
  29.   }
  31.   return (
  32.     <Editor 
  33.         height={600}
  34.       language="javascript"
  35.       theme="vs-dark"
  36.       defaultValue="console.log('hello world')"
  37.       onMount={onEditorDidMount}
  38.       onChange={onEditorChange}
  39.     />
  40.   )
  41. }
  43. export default MonacoEditor;

如果不用 cdn 的私有化部署需求，可以把 paths.vs 配本地，将资源放置本地，替换cdn资源
同时用 copy-webpack-plugin 复制 monaco-editor 相应代码到产物目录

loader

https://github.com/suren-atoyan/monaco-loader
用vs 作为路径别名，避免路径过长的问题

vs 默认配置
https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js

loader.init

  1. loader.init().then((monaco) => {
  2.   const wrapper = document.getElementById("root");
  3.   wrapper.style.height = "100vh";
  5.   const properties = {
  6.     value: "function hello() {\n\talert('Hello world!');\n}",
  7.     language: "javascript"
  8.   };
  10.   monaco.editor.create(wrapper, properties);
  11. });