Skip to content

Commit f8145ba

Browse files
rennzhangrennzhang
committed
docs: update docs
1 parent 8097bab commit f8145ba

File tree

3 files changed

+97
-37
lines changed

3 files changed

+97
-37
lines changed

‎README.md

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
# Introduction
99

10-
The codemirror component of vue3. This component is developed based on [Codemirror 5](http://codemirror.net/5/) and only vue3 is supported.
10+
The codemirror component of vue3. This component is developed based on [Codemirror 5](http://codemirror.net/5/) and only vue3 is supported.
1111

1212
In addition to the officially supported modes, the log output presentation mode is added, out of the box, but not necessarily suitable for all scenarios.
1313

@@ -27,6 +27,12 @@ yarn add codemirror-editor-vue3 codemirror@5.6.0
2727
pnpm i codemirror-editor-vue3 codemirror@5.6.0 -S
2828
```
2929

30+
> If your project requires Typescript support, you will also need to install the '@types/codemirror' dependency.
31+
32+
```bash
33+
npm install @types/codemirror@5.60.5 -D
34+
```
35+
3036
## Register global component
3137

3238
> **Do not recommend global registration components**, which will result in the type of prompt on the template that cannot be properly obtained.
@@ -105,29 +111,30 @@ for (; i < 9; i++) {
105111
[cm_editor_type_url]: https://codemirror.net/doc/manual.html#config
106112
[default_options_url]: https://github.com/RennCheung/codemirror-editor-vue3/blob/main/packages/src/config/index.ts#L68
107113

108-
| name | description | type | default |
109-
| ----------------- | :--------------------------------------------------------: | :--------------------------- | :------------------------------------: |
110-
| **value(v-model)** | Editor content | `string` | "" |
111-
| **options** | [Configuration options of codemirror5][cm_config_url] | [EditorConfiguration][cm_editor_type_url] | [DEFAULT_OPTIONS][default_options_url] |
112-
| **placeholder** | Editor placeholder content to introduce codemirror related files | `string` | "" |
113-
| **border** | Whether to display editor borders | `boolean` | `false` |
114-
| **width** | width | `string` | `100% ` |
115-
| **height** | height | `string` | `100% ` |
116-
| **original-style** | Using the original style, disable the second modification of the style for this component (but does not affect width, height, and border) | ` boolean` | `false` |
117-
| **KeepCursorInEnd** | Always keep the mouse position on the last line | `boolean` | `false` |
118-
| **merge** | merge mode, can also be used as diff pattern | `boolean` | `false` |
119-
| *name* | Name, which is passed to the textarea inside the component(This is useless🙃) | `string` | - |
120-
114+
| name | description | type | default |
115+
| ------------------- | :---------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------- | :------------------------------------: |
116+
| **value(v-model)** | Editor content | `string` | "" |
117+
| **options** | [Configuration options of codemirror5][cm_config_url] | [EditorConfiguration][cm_editor_type_url] | [DEFAULT_OPTIONS][default_options_url] |
118+
| **placeholder** | Editor placeholder content to introduce codemirror related files | `string` | "" |
119+
| **border** | Whether to display editor borders | `boolean` | `false` |
120+
| **width** | width | `string` | `100% ` |
121+
| **height** | height | `string` | `100% ` |
122+
| **original-style** | Using the original style, disable the second modification of the style for this component (but does not affect width, height, and border) | ` boolean` | `false` |
123+
| **KeepCursorInEnd** | Always keep the mouse position on the last line | `boolean` | `false` |
124+
| **merge** | merge mode, can also be used as diff pattern | `boolean` | `false` |
125+
| _name_ | Name, which is passed to the textarea inside the component(This is useless🙃) | `string` | - |
121126

122127
## Events
128+
123129
### Component Events
130+
124131
> The following three are only the events encapsulated by this component. Please refer to more events [Codemirror Events](./events#codemirror-events)
125132
126-
| event name | description | params |
127-
| -------- | :---------------------: | :------------------------------------ |
128-
| `change` | value or instance changes | `(value: string, cm: Editor) => void` |
129-
| `input` | input | `(value: string) => void` |
130-
| `ready` | The Codemirror component is mounted | `(cm: Editor) => void;` |
133+
| event name | description | params |
134+
| ---------- | :---------------------------------: | :------------------------------------ |
135+
| `change` | value or instance changes | `(value: string, cm: Editor) => void` |
136+
| `input` | input | `(value: string) => void` |
137+
| `ready` | The Codemirror component is mounted | `(cm: Editor) => void;` |
131138

132139
---
133140

@@ -169,4 +176,3 @@ The following events are official events of Codemirror5. You can refer to the of
169176
- `optionChange`
170177
- `scrollCursorIntoView`
171178
- `update`
172-

‎docs/en/guide/getting-started.md

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,49 @@
66
[![license](https://img.shields.io/github/license/RennCheung/codemirror-editor-vue3)](https://github.com/RennCheung/codemirror-editor-vue3)
77

88
## Introduction
9-
The codemirror component of vue3. This component is developed based on [Codemirror 5](http://codemirror.net/5/) and only vue3 is supported.
9+
10+
The codemirror component of vue3. This component is developed based on [Codemirror 5](http://codemirror.net/5/) and only vue3 is supported.
1011

1112
In addition to the officially supported modes, the log output presentation mode is added, out of the box, but not necessarily suitable for all scenarios.
1213

13-
---
1414
## Install
15+
1516
::: code-group
17+
1618
```bash [npm]
1719
npm install codemirror-editor-vue3 codemirror@5.6.0 -S
1820
```
21+
1922
```bash [yarn]
2023
yarn add codemirror-editor-vue3 codemirror@5.6.0
2124
```
25+
2226
```bash [pnpm]
2327
pnpm i codemirror-editor-vue3 codemirror@5.6.0 -S
2428
```
29+
30+
:::
31+
32+
::: details Typescript Support
33+
34+
If your project requires Typescript support, you will also need to install the type dependency.
35+
36+
::: code-group
37+
38+
```bash [npm]
39+
npm install @types/codemirror@5.60.5 -D
40+
```
41+
42+
```bash [yarn]
43+
yarn add @types/codemirror@5.60.5
44+
```
45+
46+
```bash [pnpm]
47+
pnpm i @types/codemirror@5.60.5 -D
48+
```
49+
2550
:::
2651

27-
---
2852
## Register global component
2953

3054
::: warning
@@ -42,20 +66,24 @@ const app = createApp(App);
4266
app.use(GlobalCmComponent); // [!code ++]
4367
app.mount("#app");
4468
```
45-
:::
4669

70+
:::
4771

4872
The global registered component name is Codemirror or you can customize a component name, for example:
4973

5074
::: code-group
75+
5176
```js [main.js]
5277
// ....
53-
app.use(GlobalCmComponent, { componentName: "customName" });// [!code ++]
78+
app.use(GlobalCmComponent, { componentName: "customName" }); // [!code ++]
5479
```
80+
5581
:::
5682

5783
---
84+
5885
## Use in components
86+
5987
::: code-group
6088

6189
```vue [index.vue]
@@ -87,8 +115,8 @@ export default {
87115
return {
88116
code,
89117
cmOptions: {
90-
mode: "text/javascript", // language mode
91-
theme: "default", // theme
118+
mode: "text/javascript", // language mode
119+
theme: "default", // theme
92120
},
93121
onChange(val, cm) {},
94122
};
@@ -121,7 +149,7 @@ import "codemirror/mode/javascript/javascript.js";
121149
import { ref } from "vue";
122150
const code = ref(`console.log("test");`);
123151
124-
const cmOptions:EditorSelectionChange = {
152+
const cmOptions: EditorSelectionChange = {
125153
mode: "text/javascript", // language mode
126154
theme: "default", // theme
127155
};
@@ -130,9 +158,9 @@ const onChange = (val: string, cm: Editor) => {
130158
console.log(val);
131159
console.log(cm.getValue());
132160
};
133-
134161
</script>
135162
```
163+
136164
:::
137165

138166
Example:
@@ -155,4 +183,3 @@ export default {
155183
}
156184
}
157185
</script>
158-

‎docs/zh-CN/guide/getting-started.md

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,49 @@
66
[![license](https://img.shields.io/github/license/RennCheung/codemirror-editor-vue3)](https://github.com/RennCheung/codemirror-editor-vue3)
77

88
## 简介
9-
Codemirror 的vue3组件。 基于 [Codemirror 5](http://codemirror.net/5/)开发，仅支持 vue3.
109

11-
除了Codemirror官方支持的模式外，还增加了开箱即用的日志输出模式，但不一定适用于所有场景。
10+
Codemirror 的 vue3 组件。 基于 [Codemirror 5](http://codemirror.net/5/)开发，仅支持 vue3.
11+
12+
除了 Codemirror 官方支持的模式外，还增加了开箱即用的日志输出模式，但不一定适用于所有场景。
1213

13-
---
1414
## 安装
1515

1616
::: code-group
17+
1718
```bash [npm]
1819
npm install codemirror-editor-vue3 codemirror@5.6.0 -S
1920
```
21+
2022
```bash [yarn]
2123
yarn add codemirror-editor-vue3 codemirror@5.6.0
2224
```
25+
2326
```bash [pnpm]
2427
pnpm i codemirror-editor-vue3 codemirror@5.6.0 -S
2528
```
29+
30+
:::
31+
32+
::: details 使用 Typescript
33+
34+
如果你的项目需要支持 Typescript，那还需要安装对应的类型包.
35+
36+
::: code-group
37+
38+
```bash [npm]
39+
npm install @types/codemirror@5.60.5 -D
40+
```
41+
42+
```bash [yarn]
43+
yarn add @types/codemirror@5.60.5
44+
```
45+
46+
```bash [pnpm]
47+
pnpm i @types/codemirror@5.60.5 -D
48+
```
49+
2650
:::
2751

28-
---
2952
## 注册全局组件
3053

3154
::: warning 提示
@@ -43,20 +66,24 @@ const app = createApp(App);
4366
app.use(GlobalCmComponent); // [!code ++]
4467
app.mount("#app");
4568
```
46-
:::
4769

70+
:::
4871

4972
全局注册组件名称是`Codemirror`，也可以自定义一个组件名称，例如：
5073

5174
::: code-group
75+
5276
```js [main.js]
5377
// ....
54-
app.use(GlobalCmComponent, { componentName: "customName" });// [!code ++]
78+
app.use(GlobalCmComponent, { componentName: "customName" }); // [!code ++]
5579
```
80+
5681
:::
5782

5883
---
84+
5985
## 在组件中使用
86+
6087
::: code-group
6188

6289
```vue [index.vue]
@@ -130,9 +157,9 @@ const onChange = (val: string, cm: Editor) => {
130157
console.log(val);
131158
console.log(cm.getValue());
132159
};
133-
134160
</script>
135161
```
162+
136163
:::
137164

138165
例如:

0 commit comments

Comments
 (0)