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 of text, paragraphs, lists, and other HTML elements.

The KendoReact WYSIWYG Editor is built on React from the ground up, with zero dependencies, by a company with 10+ years of experience in making enterprise-ready components and UI widgets. This results in a React text editor that delivers lighting fast performance and is highly customizable.

The Editor component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

React Rich Text Editor Demo

import React from 'react';
import ReactDOM from 'react-dom';
import { Editor, EditorTools } from '@progress/kendo-react-editor';
import content from './content';

const {
    Bold, Italic, Underline, Strikethrough, Subscript, Superscript,
    AlignLeft, AlignCenter, AlignRight, AlignJustify,
    Indent, Outdent, OrderedList, UnorderedList,
    Undo, Redo, FontSize, FontName, FormatBlock,
    Link, Unlink, InsertImage, ViewHtml,
    InsertTable,
    AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter,
    DeleteRow, DeleteColumn, DeleteTable,
    MergeCells, SplitCell
} = EditorTools;

class App extends React.Component {
    render() {
        return (
            <Editor
                tools={[
                    [Bold, Italic, Underline, Strikethrough],
                    [Subscript, Superscript],
                    [AlignLeft, AlignCenter, AlignRight, AlignJustify],
                    [Indent, Outdent],
                    [OrderedList, UnorderedList],
                    FontSize, FontName, FormatBlock,
                    [Undo, Redo],
                    [Link, Unlink, InsertImage, ViewHtml],
                    [InsertTable],
                    [AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
                    [DeleteRow, DeleteColumn, DeleteTable],
                    [MergeCells, SplitCell]
                ]}
                contentStyle={{ height: 600 }}
                defaultContent={content}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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.
  • An important text is made bold using the Bold tool to focus the reader attention on the words.
  • The Undo and Redo tools are added to allow going back and forward between different states of the text.
  • Each word and paragraph can be easily adjusted with the specific font type and size.

React Rich Text Editor Features

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

  • Ready-to-use, customizable toolset—The 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 rendering—The 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 content—You can programmatically get the HTML content of the React Rich Text Editor and/or set an updated version back.
  • Sanitizing pasted HTML content—When a user paste a content from the different source, we provide built-in function to sanitize the content to match the KendoReact Rich Text Editor standard.
  • Plugins—You 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 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. This results in more tailored and customizable experience for the users.
  • Globalization—By using the available globalization options in KendoReact, you can translate the Rich Text Editor messages by adapting them to specific culture locales.
  • Theme support—The KendoReact Editor, as well as all 70+ 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.

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 Progress Services.