web 编辑器类型

  1. 代码编辑器
  2. 富文本编辑器
    1. @monaco-editor/react
    2. monaco-editor
  3. 在线编辑器

monaco

Vscode 编辑器 https://github.com/microsoft/monaco-editor
在线案例 https://microsoft.github.io/monaco-editor
pnpm add monaco-editor
image.png
需要 monaco-editor 和 webpack 插件 monaco-editor-webpack-plugin 一起使用，
需要自定义 webpack 配置，自己封装成 react 组件

react-monaco-editor

https://github.com/react-monaco-editor/react-monaco-editor
https://github.com/Microsoft/monaco-editor
不推荐使用 react-monaco-editor

  • 要配套的 webpack 插件 monaco-editor-webpack-plugin 一起使用
  • 缺点：配置麻烦、构建和热更慢、更新时需要同步更新 webpack 插件和 monaco-editor
  • 需要自己实现 react 封装、页面加载慢

image.png