React Rich Text Editor

Name: React WYSIWYG Rich Text Editor - dhtmlxRichText
Rating: 4.7 (47 reviews)

DHTMLX Rich Text Editor based on React with flexible customization able to input and output content in HTML and Markdown

Download

Buy

RichText for:

How It Works

import React, { Component } from 'react';
import { Richtext } from "dhx-richtext";
import PropTypes from 'prop-types';
import "dhx-richtext/codebase/richtext.css";

class RichtextComponent extends Component {
  componentDidMount() {
    this.richtext = new Richtext(this.el, {
      mode: this.props.mode
    });

if (this.props.value) {
      this.richtext.setValue(this.props.value, this.props.dataType);
    }
    if (this.props.onChange) {
      this.richtext.events.on("change", () => {
        this.props.onChange(this.richtext.getValue(this.props.dataType));
      });
    }
  }
  componentWillUnmount() {
    if (this.richtext) {
      this.richtext.destructor();
    }
  }
  render() {
    return (
      <div ref={el => this.el = el} className="widget-box" style={{ width: 800, height: 400 }}></div>
    );
  }
}
RichtextComponent.propTypes = {
  mode: PropTypes.string,
  value: PropTypes.string,
  dataType: PropTypes.string,
  onChange: PropTypes.func
};
RichtextComponent.defaultProps = {
  mode: "classic",
  dataType: "html"
}

export default RichtextComponent;

6 Easy Steps to Integrate Rich Text Editor with React:

Create a richtext.js file and import files and styles of RichText

Create RichText class, which extends the Component class

Add an empty container for RichText with the reference to it in the el property using the render() function

Set the list of used RichText configuration properties and their types and add custom props and pass them to RichText if needed

When the component is initialized, initialize RichText and attach the instance of RichText to the container with the reference to it in the el property

You can install the destructor of RichText

To learn more check documentation

Check the demo on Github

Product Features

Basic operations for text editing
Classic and document modes
Fullscreen mode
Parsing and serializing content in HTML, Markdown, and plain text
Cross-browser compatibility
API to work with text

Flexible toolbar configuration
Look and feel customization
Localization
Block quotes
Advanced statistics
React, Angular, Vue.js wrappers

Share your ideas of what other features to include in dhtmlxRichText

What You Can Do With React WYSIWYG Editor

Parse HTML

Parse Markdown

Custom Icons

Custom Controls

You can parse content in the standard HTML format in the blink of an eye. Check the sample

You can parse content in Markdown format. Check the sample

You can change the icon font pack of toolbar controls for a custom one. Check the sample

You can add, update or delete any toolbar controls. Check the sample

Why Choose DHTMLX React Text Editor?

Fine-tune your rich text editor

Due to the flexibility of customization, you can change the icon font pack, set new toolbar controls, and apply different localization in your WYSIWYG React text editor.

Input/output data in HTML and Markdown formats

Our React editor is able to parse and serialize text in two formats: HTML and Markdown. This ability makes the editor an indispensable tool for website administration, blog managing, documentation, and CRM systems.

Classic and document modes

You can switch between two convenient built-in modes of the React editor - classic and document ones - to ensure the look and feel that meet your end users' requirements.

Support for different client-side frameworks

Apart from the React Rich Text Editor, our dev team provides wrappers of such widely used frameworks as Angular and Vue.js. Initializing the editor with one of these technologies is fast and simple.

dhtmlxRichText Licensing

	Individual	Commercial	Enterprise	Ultimate
License Terms	Individual Read License Agreement	Commercial Read License Agreement	Enterprise Read License Agreement	Ultimate Read License Agreement
Developers	Individual 1	Commercial 5	Enterprise 20	Ultimate
Projects	Individual 1	Commercial 1	Enterprise 5	Ultimate
Use in SaaS (unlimited end-users)	Individual	Commercial	Enterprise	Ultimate
Source code	Individual	Commercial	Enterprise	Ultimate
Perpetual distribution rights	Individual	Commercial	Enterprise	Ultimate
Support Plan	Individual Standard Support	Commercial Premium Support	Enterprise Premium Support	Ultimate Ultimate Support
Time Period	Individual 1 year	Commercial 1 year	Enterprise 1 year	Ultimate 1 year
Updates	Individual Major, minor, and maintenance updates	Commercial Major, minor, and maintenance updates	Enterprise Major, minor, and maintenance updates	Ultimate Major, minor, and maintenance updates Priority queue for bug fixing
Support requests	Individual 10	Commercial 30	Enterprise 50	Ultimate
Response Time	Individual 72h	Commercial 48h	Enterprise 48h	Ultimate 24h
Personal Account Manager	Individual	Commercial	Enterprise	Ultimate

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support: