Spaces:
Running
Running
A newer version of the Gradio SDK is available:
6.6.0
MonacoEditor
代码编辑器,Monaco Editor 的 Gradio 实现,基于 @monaco-editor/react 集成。
示例
基本使用
Diff 编辑器
Monaco Editor 配置项
可以直接传入 Monaco Editor 的配置项 IStandaloneEditorConstructionOptions。
在这个示例中,我们关闭了编辑器的minimap与 lineNumbers。
通过 JavaScript 定制化配置
如果你还需要更进一步地操作 Monaco Editor,你可以通过传入 JavaScript 函数字符串来进一步定制化配置。
API
属性
MonacoEditor
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value | str| None |
None | 编辑器的值。 |
| language | str| None |
None | 编辑器的语言(monaco-editor 支持的所有语言)。 |
| line | number| None |
None | 垂直滚动编辑器到指定行。 |
| read_only | bool| None |
None | 编辑器是否只读。 |
| loading | str| None |
'Editor is loading...' | 编辑器初始化加载时的加载文案。 |
| options | dict | None |
None | IStandaloneEditorConstructionOptions |
| overrideServices | dict | None |
None | IEditorOverrideServices |
| 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 支持的所有语言)。 |
| 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 |
| overrideServices | dict | None |
None | IEditorOverrideServices |
| 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,只有具备丰富智能感知的语言才会触发 validate 事件。
- TypeScript
- JavaScript
- CSS
- LESS
- SCSS
- JSON
- HTML
插槽
SLOTS=['loading']