KendoReact Rich Text Editor Overview

Our React Rich Text Editor enables the 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 text, paragraphs, lists, and other HTML elements.

The KendoReact WYSIWYG Editor is built on React, by a company with 19+ years of experience in making enterprise-ready components and UI widgets and uses the ProseMirror toolkit. This results in a React text editor that delivers lightning fast performance and is highly customizable.

React Rich Text Editor Demo

View Source
Edit In Stackblitz  
Change Theme:

This demo implements some of the features that are available in the KendoReact Text Editor.

  • You can insert images to the content.
  • The ordered and unordered lists allow for organizing multiple items in a semantic list element.
  • We also used different table tools to show content in a tabular format.
  • The text alignment tools allowed us to position the content exactly where we need it.
  • The insert link tool was used to transform a text into a useful link where the reader can find more information.
  • The Undo and Redo tools are added to allow going back and forward between different states of the text.
  • Words and paragraphs can be modified to use different font types, sizes and styles (Bold, Italic, Underline…).

React Rich Text Editor Features

Among the many features, which the KendoReact Rich Text Editor delivers are:

  • Ready-to-use, customizable toolsetThe React Text Editor provides a rich set of built-in, user-interface tools. It also enables you to customize each one of them and/or add custom ones.
  • Custom renderingThe KendoReact Rich Text Editor provides options for customizing the way it renders its elements—for example, HTML wrapper element, tools, and dialogs.
  • Get and/or set HTML contentYou can programmatically get the HTML content of the React Rich Text Editor and/or set an updated version.
  • Sanitizing pasted HTML contentWhen a user pastes content, the WYSIWYG editor has the built-in functionality of sanitizing the content to match the editor’s formatting.
  • PluginsYou have access to many plug-ins that provide various ways to extend and customize the functionality and features of the React Rich Text Editor.
  • Modifying the schemaBy modifying the default, built-in schema, you can add additional types of nodes and marks as well as edit and remove existing ones. This results in a more tailored experience for the users.
  • GlobalizationBy using the available globalization options in KendoReact, you can translate the Rich Text Editor messages by adapting them to specific culture locales.
  • Theme supportThe KendoReact Editor, as well as all 90+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
  • KendoReact Editor and all KendoReact components are natively written with TypeScript and provide all the benefits of TypeScript, such as typings, IntelliSense and many others.

Support Options

For any issues you might encounter while working with the KendoReact Text Editor, use any of the available support channels:

  • KendoReact license holders and active trialists can take advantage of our outstanding customer support delivered by the developers building the library. To submit a support ticket, use the KendoReact dedicated support system.
  • 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 the planned ones for release.
  • KendoReact uses GitHub Issues as its bug tracker and you can submit any related reports there. Also, check out the closed list.
  • You may still need a tailor-made solution for your project. In such cases, go straight to Telerik Services.