All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

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 = "<img alt='Editor for ASP.NET MVC logo' style='display:block;margin-left:auto;margin-right:auto' src='images/kendo-ui.png'/><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