RichTextEditor
The rich-text editor (aka. WYSIWYG) allows user to format text using an editing area. This component uses CKEditor under the hood.Prop | Required | Description | Type |
|---|---|---|---|
defaultValue | — | The default value of the rich text editor | string |
id | — | The ID for the rich text editor. If not provided, an auto-generated ID will be used. | string |
minHeight | — | The minimum height of the rich text editor | string |
maxHeight | — | The maximum height of the rich text editor. Content will start inline scrolling when reached. | string |
showWordCount | — | Shows a word counter at the bottom | boolean |
onChange | — | Handler for when the value changes | ((data: string) => void) & ChangeEventHandler<HTMLTextAreaElement> |
licenseKey | — | The license key for the rich text editor. This is required for enabling premium features. | string |
aiApiUrl | — | The URL for the AI API. This is used for integrating AI-based features in the editor. | string |
ckFinderApiUrl | — | The URL for the CKFinder API. This is used for integrating CKFinder file management features. | string |
toolbarConfig | — | Configuration for the toolbar. This should be a key from the toolbarConfig object. | "default_toolbar" | "format_toolbar" | "source_toolbar" | "source_with_browse_toolbar" | "simple_toolbar" | "stripped_toolbar" | "single_line_toolbar" | "document_toolbar" | "ckfinder_toolbar" | "ckfinder_no_browse_toolbar" | "all_toolbar" |
isAiDisabled | — | Disable AI features in the editor | boolean |
additionalConfig | — | Additional editor configuration to merge with the base configuration. Can be an object or a function that receives the current config. When using a function, you can access and modify the current toolbar config. @example // As object additionalConfig={{ mention: { feeds: [...] } }} // As function - access current config additionalConfig={(currentConfig) => ({ ...currentConfig, toolbar: { ...currentConfig.toolbar, items: [...currentConfig.toolbar.items, 'customButton'] } })} | Partial<EditorConfig> | (currentConfig: EditorConfig) => Partial<EditorConfig> |
extraPlugins | — | Additional CKEditor plugins to load alongside the default plugins. These will be appended to the existing plugin list. @example import CustomPlugin from './CustomPlugin'; <RichTextEditor extraPlugins={[CustomPlugin]} /> | PluginConstructor[] |