Configuration
This section provides a comprehensive overview of the detailed configuration object config for the editor component. This configuration object encompasses all customizable properties of the editor, forming the core foundation for personalized editing experiences. By flexibly adjusting config, you can precisely shape the editor's behavior and appearance to meet diverse usage requirements.
EditorConfig Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| databaseName | Database name used when storing editor content in IndexedDB. | string | default |
| scroll | Whether the editor content allows scrolling via scrollbar. Set to false: No scrollbar appears; editor height increases as content grows.Set to true: Fixed editor height; scrollbar appears when content exceeds editor height. Requires setting style.height or style.maxHeight (must not be undefined). | boolean | true |
| placeholder | Placeholder text displayed when editor content is empty. | string | - |
| readOnly | Whether the editor is read-only. Set to true to disable editing; otherwise, editing is allowed. | boolean | false |
| autoFocus | Whether the editor automatically gains focus after creation and mounting. Set to true to auto-focus on mount; otherwise, focus requires user interaction. | boolean | false |
| maxLength | Maximum allowed input length for editor content. Input continues beyond max length but triggers maxLength event. | number | - |
| animation | Animation configuration for editor interactions. See here for detailed properties. | EditorAnimationConfig | - |
| html | Configuration for editor content display and storage. See here for detailed properties. | EditorHtmlConfig | - |
| style | Styling configuration for the editor. See here for detailed properties. | EditorStyleConfig | - |
| toolbar | Toolbar configuration. See here for detailed properties. | EditorToolbarConfig | - |
| footer | Footer configuration. See here for detailed properties. | EditorFooterConfig | - |
| plugins | Global plugin configuration for the editor. | Array<Function> | - |
| modules | Editor module configuration. See here for detailed properties. | Array<EditorModule> | - |
| normalizers | Methods used for normalizing SSML code during editor processing. | Array<EditorNormalization> | - |
EditorAnimationConfig Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| zoom | Whether to apply zoom effect to mark elements when they receive hover events. | boolean | true |
| grayscale | Whether to reduce opacity of other nodes (excluding the hovered mark element's node) when a mark element receives hover events. | boolean | true |
EditorHtmlConfig Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| storageType | Editor content storage type. | StorageType | StorageType.NONE |
| storeName | Database name used when storing editor content in local IndexedDB (local storage). | string | html |
| autoSave | Whether to enable automatic content saving. | boolean | true |
| autoSaveWait | Automatic save interval (in ms) when content changes. (triggers via throttling after content modification). | number | 5000 |
| reader | Method to retrieve content from external storage. | Function | Promise.resolve('') |
| saver | Method to save content to external storage. | Function | Promise.resolve(true) |
EditorStyleConfig Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| height | Editor height | string | - |
| minHeight | Minimum editor height | string | 300px |
| maxHeight | Maximum editor height | string | 500px |
EditorToolbarConfig Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| menus | Toolbar button configuration. See here for detailed properties. | Array<EditorMenuConfig<Component>> | [] |
| align | Alignment method for toolbar buttons. | RowContainerAlign | RowContainerAlign.CENTER |
| style | Styling configuration for the toolbar. | StyleValue | - |
EditorFooterConfig Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| menus | Footer button configuration. See here for detailed properties. | Array<EditorMenuConfig<Component>> | [] |
| align | Alignment method for footer buttons. | RowContainerAlign | RowContainerAlign.CENTER |
| style | Styling configuration for the footer. | StyleValue | - |
EditorMenuConfig Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| * component | Vue component used for toolbar buttons | Component | - |
| props | Props passed to the button component | Record<string, any> | - |
Note: Parameters marked with
*are required.
EditorModule Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| * name | Module name (used to distinguish modules; duplicate names won't be registered). | string | - |
| * type | Editor node type associated with this module. | string | - |
| renderElement | Method to render node content in editor area (HTML). | Function | - |
| elementToHtml | Method to convert node to HTML. | Function | - |
| htmlToElement | Method to convert HTML to node. | Function | - |
| plugin | Plugin configuration (must relate to this module's editor node). | Function | - |
| serializer | Method to convert node to SSML. | Function | - |
Note: Parameters marked with
*are required.