配置
在本节中,我们将全面介绍编辑器组件的详细配置对象 config 所包含的各项选项。该配置对象汇集了编辑器的所有可定制属性,是实现个性化编辑体验的核心基础。通过灵活调整 config,您可以精准地塑造编辑器的行为与外观,以满足多样化的使用需求。
EditorConfig Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| databaseName | 编辑器使用本地 IndexedDB 存储时的数据库名称 | string | default |
| scroll | 编辑器内容是否允许使用滚动条滚动。 如果设置为 false,编辑器将不会出现滚动条,编辑器高度会随着内容增多而增高。如果设置为 true,编辑器将固定高度,内容超过编辑器高度后将会出现滚动条。请同时设置 style.height 或 style.maxHeight 的值且不能为 undefined,否则设置将无效。 | boolean | true |
| placeholder | 编辑器内容为空时显示的占位文案 | string | - |
| readOnly | 编辑器是否是只读的。 如何设置为 true,编辑器将不可编辑,否则允许编辑。 | boolean | false |
| autoFocus | 编辑器在创建并挂载后是否自动获取焦点。 如何设置为 true,编辑器将在创建并挂载后自动获取焦点,否则需要用户点击编辑区域后才会获取焦点。 | boolean | false |
| maxLength | 编辑器输入文字时允许输入的最大长度。 到达最大长度后用户依然可以继续输入文字,但是会触发 maxLength 事件。 | number | - |
| animation | 编辑器交互动画配置。详细配置属性请参考 这里 | EditorAnimationConfig | - |
| html | 编辑器内容的显示和存储相关配置。详细配置属性请参考 这里 | EditorHtmlConfig | - |
| style | 编辑器样式配置。详细配置属性请参考 这里 | EditorStyleConfig | - |
| toolbar | 编辑器工具栏配置。详细配置属性请参考 这里 | EditorToolbarConfig | - |
| footer | 编辑器页脚配置。详细配置属性请参考 这里 | EditorFooterConfig | - |
| plugins | 编辑器全局插件配置 | Array<Function> | - |
| modules | 编辑器模块配置。详细配置属性请参考 这里 | Array<EditorModule> | - |
| normalizers | 编辑器 SSML 代码标准化时使用的方法 | Array<EditorNormalization> | - |
EditorAnimationConfig Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| zoom | 当编辑器内 mark 元素获取到 hover 事件时,是否为此 mark 元素使用放大效果。 | boolean | true |
| grayscale | 当编辑器内 mark 元素获取到 hover 事件时,除此 mark 元素所在的节点,其它节点是否降低透明度。 | boolean | true |
EditorHtmlConfig Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| storageType | 编辑器内容存储类型 | StorageType | StorageType.NONE |
| storeName | 编辑器内容使用本地 IndexedDB 存储时的仓库名称 | string | html |
| autoSave | 编辑器内容是否使用自动存储 | boolean | true |
| autoSaveWait | 编辑器内容使用自动存储时触发的自动保存时间间隔。单位 ms。 (编辑器内容发生改变后采用节流方式触发自动保存,此属性值作为节流等待的时间。) | number | 5000 |
| reader | 编辑器内容使用外部存储时调用的读取内容方法 | Function | Promise.resolve('') |
| saver | 编辑器内容使用外部存储时调用的保存内容方法 | Function | Promise.resolve(true) |
EditorStyleConfig Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 编辑器高度 | string | - |
| minHeight | 编辑器最小高度 | string | 300px |
| maxHeight | 编辑器最大高度 | string | 500px |
EditorToolbarConfig Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| menus | 编辑器工具栏按钮配置。详细配置属性请参考 这里 | Array<EditorMenuConfig<Component>> | [] |
| align | 编辑器工具栏按钮对齐方式 | RowContainerAlign | RowContainerAlign.CENTER |
| style | 编辑器工具栏样式配置 | StyleValue | - |
EditorFooterConfig Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| menus | 编辑器页脚按钮配置。详细配置属性请参考 这里 | Array<EditorMenuConfig<Component>> | [] |
| align | 编辑器页脚按钮对齐方式 | RowContainerAlign | RowContainerAlign.CENTER |
| style | 编辑器页脚样式配置 | StyleValue | - |
EditorMenuConfig Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| * component | 编辑器工具栏按钮使用的 Vue 组件 | Component | - |
| props | 按钮使用的 Vue 组件接收的 props | Record<string, any> | - |
注:带
*的参数为必填项。
EditorModule Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| * name | 编辑器模块使用的名称。用于区分其它模块,同名称模块不会重复注册。 | string | - |
| * type | 此模块关联的编辑器节点类型 | string | - |
| renderElement | 此模块关联的编辑器节点内容在编辑器内容区域渲染 HTML 时所使用的方法。 | Function | - |
| elementToHtml | 此模块关联的编辑器节点转换为 HTML 时所使用的方法。 | Function | - |
| htmlToElement | HTML 转换为此模块关联的编辑器节点时所使用的方法。 | Function | - |
| plugin | 编辑器插件配置。(此处的插件配置应与此模块关联的编辑器节点相关) | Function | - |
| serializer | 此模块关联的编辑器节点转换为 SSML 时所使用的方法。 | Function | - |
注:带
*的参数为必填项。