EditorProps

Premium

Represents the props of the KendoReact Editor component.

Name	Type	Default	Description
ariaDescribedBy?	string		Identifies the element(s) that describe the Editor component. Similar to the HTML aria-describedby attribute. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} defaultEditMode="div" ariaDescribedBy="description-element-id" />
ariaLabel?	string		Provides an accessible label for the Editor component. Similar to the aria-label attribute. jsx <Editor ariaLabel="Rich Text Editor" />
ariaLabelledBy?	string		Identifies the element(s) that label the Editor component. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} defaultEditMode="div" ariaLabelledBy="label-element-id" />
className?	string		Adds custom CSS classes to the Editor's root element. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} className="custom-editor-class" contentStyle={{ backgroundColor: 'lightgray' }} />
contentStyle?	React.CSSProperties		Applies custom styles to the content element wrapper of the Editor. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} contentStyle={{ backgroundColor: 'lightgray' }} />
defaultContent?	string		Sets the default HTML content of the Editor. This content is rendered when the Editor is initialized and no value is provided. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} defaultContent="<p>Hello, World!</p>" />
defaultEditMode?	"iframe" | "div"		Sets the initial edit mode of the Editor. Defaults to iframe. iframe: The Editor content is rendered inside an <iframe>. div: The Editor content is rendered inside a <div> element. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} defaultEditMode="div" />
dir?	string		Specifies the text directionality of the Editor content. Accepts ltr (left-to-right) or rtl (right-to-left). jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} dir="rtl" />
keyboardNavigation?	boolean		Disables the built-in keyboard navigation of the Editor's toolbar when set to false. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} keyboardNavigation={false} />
onBlur?	(event: EditorBlurEvent) => void		Triggered when the Editor's content element loses focus. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} onBlur={(event) => console.log('Editor blurred')} />
onChange?	(event: EditorChangeEvent) => void		Triggered when the value of the Editor is about to change. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} onChange={(event) => console.log(event.value)} />
onExecute?	(event: EditorExecuteEvent) => boolean | void		Triggered when the Editor is about to apply a transaction. To prevent the transaction, return false. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} onExecute={(event) => { console.log('onExecute called'); event.transaction.steps.length > 0; }} />
onFocus?	(event: EditorFocusEvent) => void		Triggered when the Editor's content element receives focus. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} onFocus={(event) => console.log('Editor focused')} />
onIFrameInit?	(event: EditorIFrameInitEvent) => void		Triggered during the initialization of an Editor with the iframe property set to true. Allows access to the iframe document for customization. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} onIFrameInit={(event) => { console.log('Iframe initialized'); event.iframe.style.border = 'none'; }} />
onMount?	(event: EditorMountEvent) => void | EditorView		Triggered when the Editor is about to mount. Useful for configuring the EditorView object. To initialize EditorView, use the properties of the event object. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} onMount={(event) => console.log(event.dom)} />
onPasteHtml?	(event: EditorPasteEvent) => string | void		Triggered when content is pasted into the Editor. Allows modification of the pasted content. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} onPasteHtml={(event) => event.pastedHtml.toUpperCase()} />
preserveWhitespace?	boolean | "full"		Defines options for parsing HTML content: false: Collapses whitespace as per HTML rules. true: Preserves whitespace but normalizes newlines to spaces. full: Fully preserves whitespace. Defaults to full. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} preserveWhitespace="full" />
resizable?	boolean		Enables or disables resizing of the Editor. Defaults to false. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} resizable={true} />
style?	React.CSSProperties		Applies custom styles to the Editor's root element. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} style={{ border: '1px solid black' }} />
tools?	any[]		Configures the tools available in the Editor's toolbar. By default, no tools are rendered. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} />
value?	string | Node		Specifies the value of the Editor. Can be a ProseMirror Node or an HTML string. jsx <Editor tools={[[EditorTools.Bold, EditorTools.Italic]]} value="<p>Initial content</p>" />