Controlled Mode

By default, the Editor is in an uncontrolled mode.

Controlling the Value

To manage the value of the Editor:

  1. Use its value property.
  2. Handle the onChange event.
  3. Pass the new value through the props.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Editor, EditorTools, EditorUtils, ProseMirror } from '@progress/kendo-react-editor';

const { Bold, Italic } = EditorTools;

class App extends React.Component {
    state = {
        value: EditorUtils.createDocument(
            new ProseMirror.Schema({ nodes: EditorUtils.nodes, marks: EditorUtils.marks }),
            '<p>Editor sample content</p>'
        )
    };

    onChange = (event) => {
        this.setState({ value: event.value });
    }

    render() {
        return (
            <Editor
                value={this.state.value}
                onChange={this.onChange}
                tools={[[ Bold, Italic ]]}
                contentStyle={{ height: 100 }}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Using String Value

The Editor's value property can also be a string. The HTML representation of the Editor's document needs to be obtained by the html getter of the onChange event object.

The following example demonstates how to use a string value of the Editor.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Editor, EditorTools } from '@progress/kendo-react-editor';
const { Bold, Italic } = EditorTools;

class App extends React.Component {
    state = { value: '<p>Editor sample content</p>' };

    onChange = (event) => {
        this.setState({ value: event.html });
    }

    render() {
        return (
            <Editor
                value={this.state.value}
                onChange={this.onChange}
                tools={[[ Bold, Italic ]]}
                contentStyle={{ height: 100 }}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Using Uncontrolled Mode

To utilize the Editor in uncontrolled mode, use its defaultContent prop to set initial HTML and the editor's instance to get the edited HTML. See example.