# monacoeditor-for-react

> monaco-editor的组件化封装

Latest version **0.1.11** (published 2022-01-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install monacoeditor-for-react
pnpm add monacoeditor-for-react
yarn add monacoeditor-for-react
bun add monacoeditor-for-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.11 |
| Published | 2022-01-11 |
| First published | 2021-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 41.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | YeShengtao |
| Maintainers | qfengx |

## Links

- npm: https://www.npmjs.com/package/monacoeditor-for-react
- Repository: git@gitee.com:qfengx_frontend/monacoeditor-for-react
- npm.io page: https://npm.io/package/monacoeditor-for-react

## Dependencies (12)

- [react](https://npm.io/package/react.md) ^17.0.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [unfetch](https://npm.io/package/unfetch.md) ^4.2.0
- [lz-string](https://npm.io/package/lz-string.md) ^1.4.4
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [state-local](https://npm.io/package/state-local.md) ^1.0.7
- [monaco-editor](https://npm.io/package/monaco-editor.md) ^0.30.1
- [worker-loader](https://npm.io/package/worker-loader.md) ^2.0.0
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.16.0

## Recent versions

- 0.1.11 (latest) — 2022-01-11
- 0.1.10 — 2022-01-11
- 0.1.9 — 2021-12-30
- 0.1.8 — 2021-12-30
- 0.1.7 — 2021-12-13
- 0.1.6 — 2021-12-13
- 0.1.5 — 2021-12-13
- 0.1.4 — 2021-12-13
- 0.1.3 — 2021-12-13
- 0.1.2 — 2021-12-13
- 0.1.1 — 2021-12-13
- 0.1.0 — 2021-12-13
- 0.0.7 — 2021-12-10
- 0.0.6 — 2021-12-10
- 0.0.5 — 2021-12-10
- … 4 more at https://npm.io/package/monacoeditor-for-react/versions

## 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)

---
_Source: https://npm.io/package/monacoeditor-for-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._