create-react-app react中使用monaco-editor v0.44

最新推荐文章于 2024-08-08 08:12:01 发布

菲吻于雪

最新推荐文章于 2024-08-08 08:12:01 发布

阅读量537

点赞数 6

分类专栏： react 文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/qq_43519131/article/details/135402233

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在使用create-react-app构建的React应用中集成MonacoEditor，包括安装、配置Webpack和craco，以及在组件中正确导入和使用MonacoEditor以实现代码高亮和编辑功能。

摘要由CSDN通过智能技术生成

在使用通过create-react-app创建的react应用中使用monaco-editor v0.44

下载包：

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

安装插件：
使用craco自定义webpack配置

npm i craco

package.json

"scripts": {
   "start": "craco start",
   "build": "craco build",
},

在项目根目录创建craco.config.js文件，文件内容：

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

module.exports = {
  webpack: {
    // 别名配置
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    // 插件
    configure(webpackConfig) {
      webpackConfig.plugins.push(new MonacoWebpackPlugin())
      return webpackConfig
    }
  }
}

不配置插件会报错或者代码不高亮，没有提示等问题：

Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule

在组件中使用

import * as monaco from 'monaco-editor'

interface MonacoEditorProps {
  code?: string
  language: 'javascript' | 'json'
  disabled?: boolean
}

// 省略部分无关代码
const MonacoEditor: FC<MonacoEditorProps> = (props) => {
  const editContainerRef = useRef(null)
  const editor = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);

  useEffect(() => {
    if(editContainerRef.current && !editor.current) {
      editor.current = monaco.editor.create(editContainerRef.current, {
        value: '',
        language: props.language,
        minimap: {
          enabled: false
        },
        colorDecorators: true, // 颜色装饰器
        automaticLayout: true,
        theme: 'vs-black',
        glyphMargin: true,
      })
    }

    window.addEventListener("resize", function () {
      editor.current?.layout()
    });

    return () => {
      window.removeEventListener("resize", function () {
        editor.current?.layout()
      });
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div className="react-monaco-editor" style={{ width: '100%', height: '100%' }}>
      <div ref={editContainerRef} style={{ width: '100%', height: '100%' }}></div>
    </div>
  )
}

就可以正常使用了