All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

Editor Overview

The Editor allows the user to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface.

It provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling.

The Editor wrapper for React is a client-side wrapper for the Kendo UI Editor widget.

Basic Usage

The following example demonstrates the Editor in action.

class EditorContainer extends React.Component {
    constructor(props) {
            super(props);
            this.value = props.value;
    }

    render() {
        return (
            <div>
                <Editor value={this.value} height={500}/>
            </div>
        );
     }
    }

    var content = "<h2>Kendo UI Editor wrapper for React</h2><p>The Kendo UI Editor wrapper for React allows your users to edit HTML in a familiar, user-friendly way. In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget outputs identical HTML across all major browsers, follows accessibility standards and provides API for content manipulation.</p>"

ReactDOM.render(
    <EditorContainer value={content}/>,
    document.querySelector('my-app')
);
<style>
    table.k-editor{
        height:400px;
    }
</style>

Installation

  1. Download and install the package.

    npm install --save @progress/kendo-editor-react-wrapper
  2. Once installed, import the Editor wrapper component from the package.

    import { Editor } from '@progress/kendo-editor-react-wrapper';
  3. You are required to install one of the Kendo UI themes to style your components.

Dependencies

The Editor package requires you to install the following peer dependencies in your application:

  • @progress/kendo-ui

Features and Functionalities

Events

The following example demonstrates basic Editor events. You can subscribe to all Editor events by the handler name.

class EditorContainer extends React.Component {

    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onSelect = this.onSelect.bind(this);
        this.onKeydown = this.onKeydown.bind(this);
    }

    onChange = (e) => {
         console.log("event :: change");
         console.log(e);
    }

    onSelect = (e) => {
         console.log("event :: select");
         console.log(e);
    }

    onKeydown = (e) => {
         console.log("event :: keydown");
         console.log(e);
    }
    render() {
        return (
            <div>
                <Editor change={this.onChange} select={this.onSelect} keydown={this.onKeydown}/>
            </div>
        );
    }
}
ReactDOM.render(
    <EditorContainer/>,
    document.querySelector('my-app')
);
In this article