EditorProps

Premium

Updated on Aug 26, 2025

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>" />