@progress/kendo-editor-react-wrapper/docs/index.md

Kendo UI Editor wrapper for React

---
title: Overview
page_title: Editor Overview - Components - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI Editor wrapper for React delivers and use the component in React projects."
slug: overview_editor
position: 0
---

# 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](http://docs.telerik.com/kendo-ui/api/javascript/ui/editor) widget.

## Basic Usage

The following example demonstrates the Editor in action.

{% meta height:450 %}
```jsx-preview
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')
);
```
```html
<style>
    table.k-editor{
        height:400px;
    }
</style>
```
{% endmeta %}

## Installation

1. Download and install the package.

    ```sh
        npm install --save @progress/kendo-editor-react-wrapper
    ```

2. Once installed, import the Editor wrapper component from the package.

    ```sh
        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](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* @progress/kendo-ui

## Features and Functionalities

* [PDF export]({% slug pdf_export_editor %})
* [Tools]({% slug tools_editor %})

## Events

The following example demonstrates basic Editor events. You can subscribe to [all Editor events](https://docs.telerik.com/kendo-ui/api/javascript/ui/editor#events) by the handler name.

```jsx
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')
);
```

## Suggested Links

* [Kendo UI Editor for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/editor/overview)
* [API Reference of the Editor Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/editor)