New to KendoReact? Start a free 30-day trial

EditorProps

Interface

Represents the props of the KendoReact Editor component.

Definition

Package:@progress/kendo-react-editor

Properties

ariaDescribedBy?

string

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

Example:

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.

Example:

jsx

<Editor ariaLabel="Rich Text Editor" />

ariaLabelledBy?

string

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

Example:

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.

Example:

jsx

    <Editor
        tools={[[EditorTools.Bold, EditorTools.Italic]]}
        className="custom-editor-class"
        contentStyle={{ backgroundColor: 'lightgray' }}
    />

contentStyle?

CSSProperties

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

Example:

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.

Example:

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.

Example:

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).

Example:

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.

Example:

jsx

    <Editor
      tools={[[EditorTools.Bold, EditorTools.Italic]]}
      keyboardNavigation={false}
    />

onBlur?

(event: EditorBlurEvent) => void

Triggered when the Editor's content element loses focus.

Parameters:eventEditorBlurEvent

The event object containing blur details.

Example:

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.

Parameters:eventEditorChangeEvent

The event object containing change details.

Example:

jsx

    <Editor
      tools={[[EditorTools.Bold, EditorTools.Italic]]}
      onChange={(event) => console.log(event.value)}
    />

onExecute?

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

Example:

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.

Parameters:eventEditorFocusEvent

The event object containing focus details.

Example:

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.

Parameters:eventEditorIFrameInitEvent

The event object containing iframe details.

Example:

jsx

    <Editor
      tools={[[EditorTools.Bold, EditorTools.Italic]]}
      onIFrameInit={(event) => {
        console.log('Iframe initialized');
        event.iframe.style.border = 'none';
      }}
/>

onMount?

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

Example:

jsx

    <Editor
      tools={[[EditorTools.Bold, EditorTools.Italic]]}
      onMount={(event) => console.log(event.dom)}
    />

onPasteHtml?

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

Example:

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.

Example:

jsx

    <Editor
      tools={[[EditorTools.Bold, EditorTools.Italic]]}
      preserveWhitespace="full"
    />

resizable?

boolean

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

Example:

jsx


<Editor tools={[[EditorTools.Bold, EditorTools.Italic]]}
resizable={true} />

style?

CSSProperties

Applies custom styles to the Editor's root element.

Example:

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.

Example:

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.

Example:

jsx

    <Editor
      tools={[[EditorTools.Bold, EditorTools.Italic]]}
      value="<p>Initial content</p>"
    />

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.

Example:

tsx

// Boolean: generic "editor" label
<Editor webMcp tools={[[EditorTools.Bold, EditorTools.Italic]]} />

// Config object: explicit name
<Editor webMcp={{ dataName: 'article' }} tools={[[EditorTools.Bold, EditorTools.Italic]]} />