New to KendoReactStart a free 30-day trial

EditorProps

Interface

Represents the props of the KendoReact Editor component.

Definition

Package:@progress/kendo-react-editor

Properties

Identifies the element(s) that describe the Editor component. Similar to the HTML aria-describedby attribute.

Provides an accessible label for the Editor component. Similar to the aria-label attribute.

Identifies the element(s) that label the Editor component.

Adds custom CSS classes to the Editor's root element.

contentStyle?

CSSProperties

Applies custom styles to the content element wrapper of the Editor.

Sets the default HTML content of the Editor. This content is rendered when the Editor is initialized and no value is provided.

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.

dir?

string

Specifies the text directionality of the Editor content. Accepts ltr (left-to-right) or rtl (right-to-left).

Disables the built-in keyboard navigation of the Editor's toolbar when set to false.

onBlur?

(event: EditorBlurEvent) => void

Triggered when the Editor's content element loses focus.

Parameters:eventEditorBlurEvent

The event object containing blur details.

Triggered when the value of the Editor is about to change.

Parameters:eventEditorChangeEvent

The event object containing change details.

Triggered when the Editor is about to apply a transaction. To prevent the transaction, return false.

Parameters:eventEditorExecuteEvent

The event object containing transaction details.

Returns:

boolean | void

onFocus?

(event: EditorFocusEvent) => void

Triggered when the Editor's content element receives focus.

Parameters:eventEditorFocusEvent

The event object containing focus details.

Triggered during the initialization of an Editor with the iframe property set to true. Allows access to the iframe document for customization.

Parameters:eventEditorIFrameInitEvent

The event object containing iframe details.

Triggered when the Editor is about to mount. Useful for configuring the EditorView object. To initialize EditorView, use the properties of the event object.

Parameters:eventEditorMountEvent

The event object containing initialization details.

Returns:

void | EditorView

Triggered when content is pasted into the Editor. Allows modification of the pasted content.

Parameters:eventEditorPasteEvent

The event object containing the pasted content details.

Returns:

string | void

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.

resizable?

boolean

Enables or disables resizing of the Editor. Defaults to false.

style?

CSSProperties

Applies custom styles to the Editor's root element.

tools?

any[]

Configures the tools available in the Editor's toolbar. By default, no tools are rendered.

value?

string | Node

Specifies the value of the Editor. Can be a ProseMirror Node or an HTML string.

webMcp?

boolean | WebMcpProps

Enables browser-native AI agent tools via Web MCP (Chrome 146+).

Pass true for defaults or an object for fine-grained control. AI agents are multilingual — dataName accepts any language.