Coloring's picture
feat: MonacoEditor
3488c13

A newer version of the Gradio SDK is available: 6.6.0

Upgrade

MonacoEditor

代码编辑器,Monaco Editor 的 Gradio 实现,基于 @monaco-editor/react 集成。

示例

基本使用

Diff 编辑器

Monaco Editor 配置项

可以直接传入 Monaco Editor 的配置项 IStandaloneEditorConstructionOptions

在这个示例中,我们关闭了编辑器的minimaplineNumbers

通过 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']