Monacoeditor-for-react NPM

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;

npm.io