# monacoeditor-for-react

**Repository Path**: qfengx_frontend/monacoeditor-for-react

## Basic Information

- **Project Name**: monacoeditor-for-react
- **Description**: monaco-editor组件化封装 react版
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-10-22
- **Last Updated**: 2022-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# monacoeditor-for-react

#### 介绍
monaco-editor组件化封装 react版

#### 安装
```
yarn add monacoeditor-for-react
或
npm install monacoeditor-for-react
```

[相关说明文档](https://www.yuque.com/docs/share/c9140312-a624-4292-b386-a64468de53cb)

#### 编辑器组件使用说明
---
##### 属性类型声明
```
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 | 否 | <div>正在加载...</div> |
| 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 | 否 | <div>加载异常</div> |
| 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;

```
![](${appRes}/file_1640861243000.png)