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 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 ariaLabelledBy="label-element-id" />
className?	string		Adds custom CSS classes to the Editor's root element. jsx <Editor className="custom-editor-class" />
contentStyle?	React.CSSProperties		Applies custom styles to the content element wrapper of the Editor. jsx <Editor 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 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 defaultEditMode="div" />
dir?	string		Specifies the text directionality of the Editor content. Accepts ltr (left-to-right) or rtl (right-to-left). jsx <Editor dir="rtl" />
keyboardNavigation?	boolean		Disables the built-in keyboard navigation of the Editor's toolbar when set to false. jsx <Editor keyboardNavigation={false} />
onBlur?	(event: EditorBlurEvent) => void		Triggered when the Editor's content element loses focus. jsx <Editor onBlur={(event) => console.log("Editor blurred")} />
onChange?	(event: EditorChangeEvent) => void		Triggered when the value of the Editor is about to change. jsx <Editor 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 onExecute={(event) => event.transaction.steps.length > 0} />
onFocus?	(event: EditorFocusEvent) => void		Triggered when the Editor's content element receives focus. jsx <Editor 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 onIFrameInit={(event) => { 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 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 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 preserveWhitespace="full" />
resizable?	boolean		Enables or disables resizing of the Editor. Defaults to false. jsx <Editor resizable={true} />
style?	React.CSSProperties		Applies custom styles to the Editor's root element. jsx <Editor 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={[{ name: "bold" }, { name: "italic" }]} />
value?	string | Node		Specifies the value of the Editor. Can be a ProseMirror Node or an HTML string. jsx <Editor value="<p>Initial content</p>" />