KendoReact

React Editor

  • With its huge range of features and tools, this WYSIWIG editor will enable your users to create and edit rich text within any React application.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.

Overview

The KendoReact WYSIWYG (What You See Is What You Get) Editor is a Rich Text Editor component to help users create rich text within any React application. The React Editor contains a huge range of available features and tools to help insert, create, modify and save text. The Editor component also supports additional functionality through an extensive plugin system, ensuring that any requirements can be implemented with ease.

See React Editor Overview demo

React Rich Text Editor

Tools

The available Tools within the KendoReact Editor include common text editor features including:

  • Bold, underline, italics and strike-through tools
  • Subscript and superscript tools
  • Text aligning tools
  • Indent and outdent tools
  • Ordered and unordered list tools
  • Font Size and Font Name tools
  • Font Color & Background Color tools
  • Styling tools for predefined headers and paragraph styling
  • Undo and redo tools
  • Find and Replace tool
  • Hyperlink tools
  • List handling (nested lists, working with alphabetical lists, and more)
  • Insert image dialog
  • Create and modify table tools
  • View rendered HTML tools
  • And more!

See React Editor Tools demo

React Rich Text Editor with Many Editing Tools

Rendering Modes

By default, the KendoReact Editor renders its content in an iframe element. For applications where this may not be the ideal HTML element to deal with, the Editor content can also be rendered inside a div element by changing a single property.

See React Editor Rendering Modes demo

Getting and Setting HTML Content

The KendoReact Editor allows developers to programmatically get and set the HTML of the Editor. This feature makes implementing requirements like loading and saving content to a database, or running the content through a custom sanitizer as easy as calling a single method.

See React Editor Getting and Setting HTML Content demo

React Rich Text Editor Get and Set Content

Editor Resizing

You can easily add a drag handle interaction when users hover over the edges of the component, giving them an intuitive experience for resizing the React Editor.

See the React Editor demo: Editor Resizing

React Editor component resizing

Image Resizing

When this feature is enabled, users can click on an image to activate a border with indicators they can drag to resize images through a familiar interface.

See the React Editor demo: Image Resizing

React Editor component: Image resizing

Selection

The KendoReact Editor supports a variety of selection scenarios—from simple text selection to node and cell selection. The WYSIWYG Editor can also automatically extract the HTML from the Editor’s content upon selection, or extract content when a user presses a button.

See the React Editor Selection demo

React Editor component: Selection

Sanitizing Pasted HTML

Copying and pasting content from other rich text editors, or desktop word processing applications like Microsoft Word, often comes with extra and overcomplicated HTML. Thankfully, this React Editor contains built-in functions around sanitizing content to make the pasted HTML as clean as possible. The amount of sanitation can be customized to be a light stripping of certain attributes, or go as far as to just paste the plain text of the copied content.

See React Editor Sanitizing Pasted HTML demo

React Rich Text Editor Sanitizing Content

Plugin Support

For scenarios that require additional functionality beyond what is available within the KendoReact Editor, the plugin architecture enables developers to create custom tools and integrate them into the Editor without having to access and modify the underlying source code.

See React Editor Plugin Support demo

Globalization

With an extensive list of features and tools available, the KendoReact Editor has many built-in strings to help users understand what each tool is responsible for. By default, these are all written in English, but modifying these to fit any language can be done across the entire component, or one message at a time. Additionally, the React Editor supports being rendered in right-to-left modes.

See React Editor Globalization demo

React Rich Text Editor with Globalization

Keyboard Navigation

While the KendoReact Editor offers an extensive list of tools and interactivity, it can still be interacted and navigated with ease using just a keyboard. Any aspect of the Editor, as well as its content, can be accessed with simple keyboard interactions.

Accessibility

Continuing a tradition of putting accessibility at the forefront of building React UI components, the KendoReact Editor is AAA rated for WCAG 2.0, and compliant with both WAI-ARIA and Section 508 standards.

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.