Integration with React

You can use dhtmlxRichText in an application created with the React framework. Check the demo on Github.

Please note that the implementation provided below is not the only way to use dhtmlxRichText in a React-based application. It gives you initial schema of the integration and implies further extension of the app functionality depending on your goals.

Installation

The way of adding RichText sources into a React-based app makes a certain impact on its further reuse within the application. The most handy and least overburdening for an app variant is to install RichText through NPM.

If for some reason it doesn't suit you, you may choose between two more options: include RichText sources from a package, or make use of CDN.

Initialization

There are two possible scenarios of initializing RichText inside a React application. One consists in isolating RichText structure and data inside of the React component and another one suggests separating view and data parts with the possibility of interaction between them.

Scenario 1. Isolating RichText in a React component

In this variant RichText configuration and data are held inside of the React component with no bonds with the external part of the application.

RichText initialization

  • Create a RichText.js file, then create the RichText class and add a container for RichText using the render() function. Store the reference to the container in the el property:

RichText.js

class Richtext extends Component {
  render() {
    return (
      <div ref={el => this.el = el} className="widget-box" style=:800,height:400></div>
    );
  }
}
  • After that use the new Richtext constructor to initialize RichText in the container created above:

RichText.js

class RichText extends Component {
  componentDidMount() {
    this.richtext = new Richtext(this.el, {
      toolbarBlocks: ["default", "clear", "fullscreen"]
    });
  }
}

Changing config

  • Next you can do some actions, e.g. add a new control into the toolbar:

RichText.js

class RichText extends Component {
  componentDidMount() {
    this.richtext = new Richtext(this.el, {
      toolbarBlocks: ["default", "clear", "fullscreen"]
    });
    this.richtext.toolbar.data.add({
        value:"MyAction"
    });
  }
}

Scenario 2. Exposing RichText data and config

This variant adds flexibility in the control over RichText data and configuration by allowing access to them from other parts of the application.

RichText initialization

  • The first step is the same. Create a file, let it be RichText2.js this time, and add the RichText class and use the new RichText constructor to initialize RichText.

RichText2.js

class RichTextComponent extends Component {
  componentDidMount() {
    this.richtext = new Richtext(this.el, {
      // config here
    });
  }
}
  • Define the configuration properties of RichText in the object passed as a second parameter of the constructor:
class RichTextComponent extends Component {
  componentDidMount() {
    this.richtext = new Richtext(this.el, {
      mode: this.props.mode
    });
  }
}

Thus the props configuration option will be applied to the RichText widget configuration.

  • Then create a container for RichText using the render() function:

RichText2.js

render() {
    return (
      <div ref={el => this.el = el} className="widget-box" style=:800,height:400></div>
    );
}

Working with configuration options

  • Set the list of used RichText configuration properties and their types in the props configuration option:

RichText2.js

class RichtextComponent extends Component {
  componentDidMount() {
    this.richtext = new Richtext(this.el, {
      mode: this.props.mode
    });
}
RichtextComponent.propTypes = {
  mode: PropTypes.string,
  value: PropTypes.string,
  dataType: PropTypes.string,
  onChange: PropTypes.func
};
RichtextComponent.defaultProps = {
  mode: "classic",
  dataType: "html"
}

Since the properties of RichText are exposed they are available to work with outside the component. In the example below the "document" mode is set for the richtext:

BasicSample.js

<div className='app-box'>
     <Richtext mode="document"></Richtext>
</div>

Working with RichText API

This variant of using RichText in a React application allows working with its API moving all calls of methods and event handlers into a separate file.

First, you can add a couple of wrappers for convenient work with RichText API. The example below shows how you can wrap actions for setting RichText value and handling the change event taking into account the type of data:

RichText2.js

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));
      });
    }
  }
}

After that you can use the ready wrappers in other parts of application.

  • Create a DataSample.js file and describe the methods you want to use while working with the richtext. In the example below the updateMarkdown and updateHTML methods are added for updating the the content of the RichText editor:

DataSample.js

class DataSample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      html: '',
      markdown: ``
    }
  }
  updateMarkdown(value) {
    this.setState({...this.state, markdown: value});
  }
  updateHTML(value) {
    this.setState({...this.state, html: value});
  }
}
  • Use the above methods to update the Richtext content depending on the type of entered data when some changes are made:

DataSample.js

class DataSample extends Component {
   ...   
   render() {
    return (
      <div className='app-box'>
        <p>HTML serialize</p>
        <RichtextComponent value={this.state.html} 
            onChange={val => this.updateHTML(val)}>></RichtextComponent>
 
        <hr />
        <p>Markdown serialize</p>
        <RichtextComponent value={this.state.markdown} dataType="markdown" 
            onChange={val => this.updateMarkdown(val)}></RichtextComponent>
      </div>
    );
   ...
  }
}
Back to top