KendoReact Rich Text Editor Overview

The KendoReact Editor enables users to create rich textual content through a What-You-See-Is-What-You-Get (WYSIWYG) interface and delivers a set of tools for creating, editing, and formatting of text, paragraphs, lists, and other HTML elements.

The React Editor, part of KendoReact, is built from the ground up and specifically for React, so that you get a high-performance control which integrates tightly with your application and with the rest of the KendoReact components. The KendoReact Editor component is distributed through the kendo-react-editor NPM package.

The following example demonstrates the KendoReact Editor component in action.

Example
View Source
Change Theme:

Key Features

The KendoReact Editor component delivers a range of handy developer-friendly features whose number and further development are not limited by the list in this section. The KendoReact team constantly invests efforts to improve the performance, add more value to the existing Editor library, and develop new features.

  • Tools—A set of built-in, user-interface tools, that enables you to customize the available tools and to add custom ones.
  • Getting/Setting HTML Content—You can programmatically get the HTML content of the KendoReact Editor and set an updated version back.
  • Controlled Mode—Takes advantage of the built-in options that allow you to control the value of the Editor.
  • Rendering Modes—Allows you to render the KendoReact Editor content in a div element. By default the Editor render its content in an iframe element.
  • Custom Rendering—Provides options for customizing the way the Editor renders its elements.
  • Appearance—Allows you to add custom styles for the KendoReact Editor's content.
  • Sanitizing Pasted HTML Content—The KendoReact Editor exposes a set of built-in functions for sanitizing the content which the user pastes in the content area.
  • Plugins—Allows you to extend and customize the Editors functionality and features by using plugins.
  • Modifying the Schema—By modifying the default, built-in schema, you can add additional types of nodes and marks as well as edit and remove the existing ones.
  • Selection—The KendoReact Editor component supports several types of selection: TextSelection, NodeSelection, CellSelection, and AllSelection.
  • Resizing—The KendoReact Editor component provides a resizing feature. You can also allow the resizing of images by using the provided built-in plugin.
  • Find and Replace—Provides you built-in tools for find and replace text content.
  • Images—Allows you to paste, drag and drop, and upload images. You can implement it and extend the built-in functionality.
  • Keyboard Navigation—Keyboard navigation functionality for the KendoReact Editor that is enabled by default.
  • Globalization—The globalization process combines the translation of component messages with adapting them to specific locales.

Toolbar Tools

The React Editor, part of KendoReact, uses the KendoReact ToolBar component to deliver UI tools and directives for associating the toolbar tools with edit-action commands. Read more about the toolbar tools of the Editor...

Appearance

You can use the React Editor, part of KendoReact, options for setting its style mode, defining the height of its content as well as customizing its appearance altogether. Read more about the styling options of the Editor...

Globalization

The React Editor, part of KendoReact, supports globalization to ensure that it can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Editor supports rendering in a right-to-left (RTL) direction. Read more about the globalization of the Editor...

Keyboard Navigation

The React Editor, part of KendoReact, supports a number of keyboard shortcuts which allow users to accomplish various commands. Read more about the keyboard navigation of the Editor...

Support Options

For any questions about the use of KendoReact Editor, or any other KendoReact components, there are several support options available:

  • KendoReact license holders and anyone in an active trial can take advantage of the outstanding KendoReact customer support delivered by the developers who built the library. To submit a support ticket, use the Telerik support system.
  • The KendoReact forums are part of the free support you can get from the community and from the KendoReact team on all kinds of general issues.
  • KendoReact Feedback Portal and KendoReact Roadmap provide information on the features in discussion and also those planned for release.
  • KendoReact uses GitHub Issues as its bug tracker, and you can submit any related reports there. Also, check out the closed list.
  • Need something unique that is tailor-made for your project? Progress offers its Progress Services group that can work with you to create any customized solution that you might need.