Skip to content

Commit 70d0c8a

Browse files
HaydenOrzHaydenOrz
committed
docs: add README.zh-CN.md
1 parent b2b14c4 commit 70d0c8a

File tree

2 files changed

+153
-5
lines changed

2 files changed

+153
-5
lines changed

‎README.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
[download-img]: https://img.shields.io/npm/dm/dt-react-monaco-editor.svg?style=flat
1212
[download-url]: https://www.npmjs.com/package/dt-react-monaco-editor
1313

14+
English | [简体中文](./README.zh-CN.md)
15+
1416
</div>
1517

1618
## Introduction
@@ -23,19 +25,19 @@ Provides `MonacoEditor` and `MonacoDiffEditor` component, make it easier to use
2325

2426
use npm
2527

26-
```bash
28+
```shell
2729
npm install dt-react-monaco-editor
2830
```
2931

3032
or use yarn
3133

32-
```bash
34+
```shell
3335
yarn add dt-react-monaco-editor
3436
```
3537

3638
or use pnpm
3739

38-
```
40+
```shell
3941
pnpm install dt-react-monaco-editor
4042
```
4143

@@ -102,7 +104,7 @@ common properties can be used on `MonacoEditor` and `MonacoDiffEditor`.
102104

103105
- `theme` theme used when the editor renders, defaults to `vs`.
104106
- `language` language of model in editor, defaults to `sql`.
105-
- `sync` sync value to model when value change, if sync property is true, the editor is controlled.
107+
- `sync` sync value to model when value change, if sync property is true, the editor is controlled, defaults to `false`.
106108
- `onChange` an event emitted when the value of the editor model has changed.
107109

108110
### MonacoEditor Own Properties
@@ -134,7 +136,7 @@ common properties can be used on `MonacoEditor` and `MonacoDiffEditor`.
134136

135137
Please See [monaco-sql-languages](https://github.com/DTStack/monaco-sql-languages).
136138

137-
`monaco-sql-languages` provides **highlighting**, **error prompts** and **auto-completion** functions for many kinds of SQL Languages for BigData domain.
139+
`monaco-sql-languages` provides **highlighting**, **error prompts** and **auto-completion** functions for many kinds of SQL Languages for BigData domain. It supports on-demand import and is easy to integrate.
138140

139141
<br/>
140142

‎README.zh-CN.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<h1 align="center">dt-react-monaco-editor</h1>
2+
3+
<div align="center">
4+
5+
[Monaco Editor](https://github.com/Microsoft/monaco-editor) React Components
6+
7+
[![NPM version][npm-image]][npm-url] [![NPM downloads][download-img]][download-url]
8+
9+
[npm-image]: https://img.shields.io/npm/v/dt-react-monaco-editor.svg?style=flat-square
10+
[npm-url]: https://www.npmjs.com/package/dt-react-monaco-editor
11+
[download-img]: https://img.shields.io/npm/dm/dt-react-monaco-editor.svg?style=flat
12+
[download-url]: https://www.npmjs.com/package/dt-react-monaco-editor
13+
14+
简体中文 | [English](./README.md)
15+
16+
</div>
17+
18+
## 简介
19+
20+
提供 `MonacoEditor` 组件和 `MonacoDiffEditor` 组件，让在 React 中使用 Monaco Editor 更轻松。
21+
22+
<br/>
23+
24+
## 安装
25+
26+
使用 npm
27+
28+
```shell
29+
npm install dt-react-monaco-editor
30+
```
31+
32+
或者使用 yarn
33+
34+
```shell
35+
yarn add dt-react-monaco-editor
36+
```
37+
38+
或者使用 pnpm
39+
40+
```shell
41+
pnpm install dt-react-monaco-editor
42+
```
43+
44+
<br/>
45+
46+
## 集成
47+
48+
看 [Monaco Editor 官方集成文档](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md).
49+
50+
<br/>
51+
52+
## 使用
53+
54+
### MonacoEditor 组件
55+
56+
```jsx
57+
import { MonacoEditor } from 'dt-react-monaco-editor';
58+
59+
function App() {
60+
const editorRef = useRef();
61+
return (
62+
<MonacoEditor
63+
value=""
64+
language="javascript"
65+
style={{ height: 400, width: 600 }}
66+
onChange={(value) => {
67+
console.log(value);
68+
}}
69+
editorInstanceRef={(ins) => (editorRef.current = ins)}
70+
/>
71+
);
72+
}
73+
```
74+
75+
### MonacoDiffEditor 组件
76+
77+
```jsx
78+
import { MonacoDiffEditor } from 'dt-react-monaco-editor';
79+
80+
function App() {
81+
const editorRef = useRef();
82+
return (
83+
<MonacoDiffEditor
84+
original="const a = 1;"
85+
value="const a = 2;"
86+
language="sql"
87+
style={{ height: 400, width: 1200 }}
88+
onChange={(value) => {
89+
console.log(value);
90+
}}
91+
diffEditorInstanceRef={(ins) => (editorRef.current = ins)}
92+
/>
93+
);
94+
}
95+
```
96+
97+
<br/>
98+
99+
## 属性
100+
101+
### 公共属性
102+
103+
公共属性在 `MonacoEditor` 和 `MonacoDiffEditor` 上都可以使用。
104+
105+
- `theme` 编辑器在渲染时应用的主题， 默认是 `vs`。
106+
- `language` 编辑器的语言类型， 默认是 `sql`。
107+
- `sync` 当 `value` 属性变化时是否将新的 `value` 同步到编辑器中，如果 `sync` 属性是 `true`，编辑器就是受控的, 默认时 `false`。
108+
- `onChange` 当编辑器的值变化时，触发这个回调。
109+
110+
### MonacoEditor 属性
111+
112+
- `value` 编辑器的值。
113+
- `options` Monaco Editor 的选项， 关联 monaco 接口[IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html)。
114+
- **[deprecated]** `editorInstanceRef` 获取 `MonacoEditor` 内部的 editor 实例。
115+
- `onCursorSelection` 当编辑器选中的内容发生变化时，触发这个回调。
116+
- `onFocus` 当编辑器聚焦时，触发这个回调。
117+
- `onBlur` 当编辑器失焦时，触发这个回调。
118+
- `editorWillMount` 在编辑器即将挂载时调用（类似于 React 的 componentWillMount）。
119+
- `editorDidMount` 当编辑器挂载完成时调用 （类似于 React 的 componentDidMount）。
120+
- `editorWillUnMount` 当编辑器即将销毁时调用 （类似于 React 的 componentWillUnmount）。
121+
122+
### MonacoDiffEditor 属性
123+
124+
- `value` modifiedEditor（右边的编辑器） 的值。
125+
- `original` originalEditor（左边的编辑器） 的值。
126+
- `options` Monaco DiffEditor 的选项， 关联 monaco 接口 [IStandaloneDiffEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneDiffEditorConstructionOptions.html).
127+
- `readOnly` modifiedEditor（右边的编辑器）是否为只读模式。
128+
- **[deprecated]** `diffEditorInstanceRef` 获取 `MonacoDiffEditor` 内部的 diffEditor 实例。
129+
- `editorWillMount` 在编辑器即将挂载时调用（类似于 React 的 componentWillMount）。
130+
- `editorDidMount` 当编辑器挂载完成时调用 （类似于 React 的 componentDidMount）。
131+
- `editorWillUnMount` 当编辑器即将销毁时调用 （类似于 React 的 componentWillUnmount）。
132+
133+
<br/>
134+
135+
## 支持更多 SQL 语言功能
136+
137+
请看 [monaco-sql-languages](https://github.com/DTStack/monaco-sql-languages).
138+
139+
`monaco-sql-languages` 为大数据领域的多种 SQL 类型提供了**高亮**、**自动错误提示**以及**自动补全** 功能，它支持**按需引入**并且很**容易集成**。
140+
141+
<br/>
142+
143+
## 更新日志
144+
145+
- [更新日志](./CHANGELOG.zh-CN.md)
146+
- [基于提交的更新日志](./CHANGELOG.md)

0 commit comments

Comments
 (0)