monacoeditor-for-react

介绍

monaco-editor组件化封装 react版

安装

yarn add monacoeditor-for-react
或
npm install monacoeditor-for-react

相关说明文档

编辑器组件使用说明

属性类型声明

export interface MonacoEditorProps {
	  renderLoader?: (errorMsg: string) => React.ReactNode;
	  src?: string;
	  language?: string;
	  theme?: string;
	  options?: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions;
	  dimension?: monaco.editor.IDimension;
	  tabSize?: number;
	  value?: string;
	  onMount?: (editorObj: monaco.editor.IStandaloneCodeEditor) => void;
	  enableCompile?: boolean;
	  onSave?: (compiling: boolean, content: string, compiled?: string) => void;
	  onCompileError?: (error: string) => void; // 编译异常报错信息
	  compileResultHandle?: (error: string | undefined, compiledCode: string) => void;
	  renderLoadError?: (error: any) => React.ReactNode;
	  className?: string;
	  style?: React.CSSProperties;
	  onChange?: (value: string, editorObj: monaco.editor.IStandaloneCodeEditor) => void;
	  debounceTime?: number;
	  babelSrc?: string;
	  fontSize?: number;
	  readonly?: boolean;
}

API

| 参数 | 说明 | 类型 | 是否必填 | 默认值 | | --- | --- | --- | --- | --- | | renderLoader | 加载状态渲染 | React.ReactNode | 否 | 正在加载... | | src | vs生产依赖库加载路径 | string | 否 | https://cdn.bootcdn.net/ajax/libs/monaco-editor/0.26.1/min/vs | | language | 语言类型 | stirng | 否 | text | | theme | 主题 | 'vs-light' | 'vs-dark' | 'hc-black' | 否 | light | | options | 编辑器参数，可参考官方文档 | monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions | 否 | | | dimension | 编辑器宽高 | monaco.editor.IDimension | 否 | | | tabSize | tab空格个数 | number | 否 | 2 | | value | 内容文本 | string | 否 | | | onMount | 编辑器渲染完成后回调，编辑内容提示等功能可参考官方对editorObj进行处理 | (editorObj: monaco.editor.IStandaloneCodeEditor) => void; | 否 | | | enableCompile | 是否启用编辑功能，开启后会加载babel相关库 | boolean | 否 | false | | onSave | ctrl+s保存的事件回调 | (compiling: boolean, content: string, compiled?: string) => void; | 否 | | | onCompileError | 编译异常回调 | (error: string) => void; | 否 | | | compileResultHandle | 编译结果处理器，也是编译结果的回调 | (error: string | undefined, compiledCode: string) => void; | 否 | | | renderLoadError | 加载异常时渲染 | React.ReactNode | 否 | 加载异常 | | className | | | | | | style | | | | | | onChange | 内容变更触发事件 | (value: string, editorObj: monaco.editor.IStandaloneCodeEditor) => void; | 否 | ​| | debounceTime | 编译防抖时间 | number | 否 | 500 | | babelSrc | babel编译库依赖路径 | string | 否 | https://weapp.eteams.cn/ecode | | fontSize | 字体大小 | number | 否 | | | readonly | 是否只读 | boolean | 否 | false |

Demo示例

import React, { useState } from 'react';

import MonacoEditor from 'monacoeditor-for-react';
import * as monaco from 'monaco-editor';


function App() {
  const [editorObj, setEditorObj] = useState<monaco.editor.IStandaloneCodeEditor>();

  return (
    // 注意默认情况下只需要对包裹的div做大小控制即可，编辑器会撑满外层div
    <div style={{ height: 500, width: 800, border: '1px solid pink', margin: 'auto', marginTop: 100 }}>
      <MonacoEditor 
        // compileWorker={new WorkerApi()}
        className="sss"
        value={`console.log("11")`}
        language="javascript"
        src={"/vs"}
        enableCompile
        onCompileError={(err: any) => {
          console.log('编译异常 => ', err);
        }}
        compileResultHandle={(err, code) => {
          console.log('编译后代码 => ', code);
        }}
        renderLoadError={(err: any) => {
          console.log('加载异常 => ', err);
          return <div>111</div>;
        }}
        onSave={(code, compiledCode) => {
          console.log('保存后的代码 => ', code, compiledCode);
        }}
        onMount={(editorObj) => {
          setEditorObj(editorObj);
        }}
        tabSize={2}
        theme="vs-dark"
        onChange={(val) => console.log('change => ', val)}
      />
    </div>
  );
}

export default App;