monaco editor 在React中的使用 封装成组件

 

主要技术点

1. 使用 useRef 获取dom 节点
2. 使用 useRef 保存 editor 实例 (使用useRef来跨越渲染周期存储数据，因为对它修改也不会引起组件渲染。)

import React, {useEffect, useRef, useState} from 'react';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';

/**
 *  2021年2月26日 13:20:14
 *  MonacoEditor 组件
 *  props详情 请看下方 const { style = .....}
 * */
function App(props) {
  const {
    style = { // dom节点样式
      height: '300px',
      width: '95%',
      border: '1px solid #eee',
    },
    value = '', // 代码文本
    onChange = () => { // 改变的事件
    },
    fontSize = 14, // 代码字体大小
    monacoOptions = {}, // monaco 自定义属性
    language = 'javascript', // 语言 支持 js ts sql css json html等
  } = props;
  const editOrRef = useRef();
  const ThisEditor = useRef();
  useEffect(() => {
    ThisEditor.current = monaco.editor.create(editOrRef.current, {
      value: value || '',
      language,
      theme: "vs",
      fontSize: fontSize + 'px',
      minimap: { // 关闭代码缩略图
        enabled: false,
      },
      ...monacoOptions,
    });

    ThisEditor.current.onDidChangeModelContent((e) => {
      let newValue = ThisEditor.current.getValue();
      onChange(newValue);
    });
    return () => {
      ThisEditor.current.dispose();
      ThisEditor.current = undefined; // 清除编辑器对象
    }
  }, []);
  useEffect(() => {
    if (ThisEditor.current) {
      ThisEditor.current.updateOptions({
        fontSize: fontSize + 'px',
      })
    }

  }, [fontSize]);

  return (
    <div style={style}
         ref={editOrRef}
    >

    </div>
  );
}

export default App;