Spaces:
Running
Running
File size: 8,243 Bytes
3488c13 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | # MonacoEditor
代码编辑器，[Monaco Editor](https://microsoft.github.io/monaco-editor/) 的 Gradio 实现，基于 [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react) 集成。
## 示例
### 基本使用
<demo name="basic"></demo>
### Diff 编辑器
<demo name="diff_editor"></demo>
### Monaco Editor 配置项
可以直接传入 Monaco Editor 的配置项 [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html)。
在这个示例中，我们关闭了编辑器的`minimap`与 `lineNumbers`。
<demo name="monaco_editor_options"></demo>
### 通过 JavaScript 定制化配置
如果你还需要更进一步地操作 Monaco Editor，你可以通过传入 JavaScript 函数字符串来进一步定制化配置。
<demo name="javascript_customize"></demo>
## API
### 属性
#### MonacoEditor
| 属性 | 类型 | 默认值 | 描述 |
| ---------------- | --------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | `str\| None` | None | 编辑器的值。 |
| language | `str\| None` | None | 编辑器的语言（monaco-editor [支持](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages)的所有语言）。 |
| line | `number\| None` | None | 垂直滚动编辑器到指定行。 |
| read_only | `bool\| None` | None | 编辑器是否只读。 |
| loading | `str\| None` | 'Editor is loading...' | 编辑器初始化加载时的加载文案。 |
| options | `dict \| None` | None | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) |
| overrideServices | `dict \| None` | None | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html) |
| height | `str \| float \| int` | 400 | 组件的高度，如果值为数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。 |
| before_mount | `str \| None` | None | 传入 JavaScript 函数字符串，在编辑器加载前执行，可以获取到 `monaco` 对象。 |
| after_mount | `str \| None` | None | 传入 JavaScript 函数字符串，在编辑器加载后执行，可以获取到`editor`对象与`monaco` 对象。 |
#### MonacoEditor.DiffEditor
| 属性 | 类型 | 默认值 | 描述 |
| ----------------- | --------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | `str\| None` | None | 修改后的源的值（右侧）。 |
| original | `str\| None` | None | 原始源的值（左侧）。 |
| language | `str\| None` | None | 编辑器的语言（monaco-editor [支持](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages)的所有语言）。 |
| original_language | `str\| None` | None | 单独指定原始源的语言。否则，它将获取 language 属性的值。 |
| modified_language | `str\| None` | None | 单独指定修改后的源的语言。否则，它将获取 language 属性的值。 |
| line | `number\| None` | None | 垂直滚动编辑器到指定行。 |
| read_only | `bool\| None` | None | 编辑器是否只读。 |
| loading | `str\| None` | 'Editor is loading...' | 编辑器初始化加载时的加载文案。 |
| options | `dict \| None` | None | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) |
| overrideServices | `dict \| None` | None | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html) |
| height | `str \| float \| int` | 400 | 组件的高度，如果值为数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。 |
| before_mount | `str \| None` | None | 传入 JavaScript 函数字符串，在编辑器加载前执行，可以获取到 `monaco` 对象。 |
| after_mount | `str \| None` | None | 传入 JavaScript 函数字符串，在编辑器加载后执行，可以获取到`editor`对象与`monaco` 对象。 |
### 事件
| 事件 | 描述 |
| ----------------------------------------------------------------- | ---------------------------------------- |
| `pro.(MonacoEditor \| MonacoEditor.DiffEditor).mount(fn, ···)` | 当编辑器加载完成时触发。 |
| `pro.(MonacoEditor \| MonacoEditor.DiffEditor).change(fn, ···)` | 当编辑器值改变时触发。 |
| `pro.(MonacoEditor \| MonacoEditor.DiffEditor).validate(fn, ···)` | 当编辑器触发校验并且校错误记存在时触发。 |
**注：** 根据 [monaco-editor](https://microsoft.github.io/monaco-editor/)，只有具备丰富智能感知的语言才会触发 validate 事件。
- TypeScript
- JavaScript
- CSS
- LESS
- SCSS
- JSON
- HTML
### 插槽
```python
SLOTS=['loading']
```
|