如何在react中使用react-monaco-editor渲染出一个编辑器

一、效果展示

二、基于vite配置

1.首先安装react-monaco-editor和monaco-editor包

复制代码
npm add react-monaco-editor

npm i monaco-editor

2.其次创建一个单独的文件(此处是tsx、直接用app或者jsx也行)

javascript 复制代码
import { useState, useEffect } from 'react'
import MonacoEditor from 'react-monaco-editor'
import './worker'

type Props = {
  jsonCode: any
}

const editor: React.FC<Props> = (props) => {
  //配置项
  const options = {
    readOnly:true,
    selectOnLineNumbers:true,
    matchBrackets:'near' as const
  }
  //json代码
  const [jsonCode, setJsonCode] = useState('{}')
  //渲染获取到的json代码
  useEffect(() => {
    if (props.jsonCode) {
      setJsonCode(JSON.stringify(JSON.parse(props.jsonCode), null, 2))
    }
  }, [props.jsonCode])
  //改变代码时触发
  const handleJsonCodeChange = (e: any) => {
    setJsonCode(e)
    console.log(jsonCode,'jsoncode代码同步')
  }

  return (
    <>
      <h2>真实数据(开发人员可以直接编辑)</h2>
      <MonacoEditor
        width="100%"
        height="500"
        language="json"
        theme="vs-dark"
        defaultValue='{}'
        value={jsonCode}
        onChange={handleJsonCodeChange}
        options={options}
        >
      </MonacoEditor>
    </>

  )
}

export default editor

接下来将此文件作为组件在其他组件中正常使用即可

根据MonacoEditor自带的配置项可以看出MonacoEditor还有非常多灵活的用法

3.如何高亮显示代码

javascript 复制代码
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
// import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
// import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
// import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') {
      return new jsonWorker()
    }
    // if (label === "css" || label === "scss" || label === "less") {
    //   return new cssWorker()
    // }
    // if (label === "html" || label === "handlebars" || label === "razor") {
    //   return new htmlWorker()
    // }
    // if (label === "typescript" || label === "javascript") {
    //   return new tsWorker()
    // }
    return new editorWorker()
  }
}

monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)

上方代码就是我 MonacoEditor组件中的worker.ts代码,直接引入到MonacoEditor组件中即可

三、官方文档中配置方式

react-monaco-editor的官方文档:

https://github.com/react-monaco-editor/react-monaco-editor/blob/master/README.md

1.和create-react-app结合

首先安装依赖

javascript 复制代码
npm i -D react-monaco-editor react-app-rewired

其次将项目中package.json文件中的react-scripts替换为react-app-rewired

最后在项目根目录中创建一个config-overrides.js

javascript 复制代码
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

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

2.和webpack结合

相关推荐
带娃的IT创业者3 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost4 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11064 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白4 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学5 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽5 小时前
【初学】调试 MCP Server
前端·mcp
四月_h6 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate6 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
许商7 小时前
【stm32】cmake构建vscode开发环境
ide·vscode·编辑器
行者..................7 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js