ReactJs

Redactor X Object

Redactor X can work in React, just import the editor to do this.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// import Redactor X
import './static/redactorx.css';
import RedactorX from './static/redactorx.js';

// call
RedactorX('#editor');

To connect plugins, you need to specify the import of Redactor X in the plugin file, like this:

import RedactorX from './static/redactorx';

After that you can run the Redactor X with the plugins:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// import Redactor X
import './static/redactorx.css';
import RedactorX from './static/redactorx.js';
import './static/alignment.js';

// call
RedactorX('#editor', {
    plugins: ['alignment']
});

Multi-page app

You may want to destroy the Redactor X object when navigating through pages in a multi-page application. To do this, use the app.destroy method. Here's an abstract example of a multi-page application:

var app;
function Home() {
    useEffect(() => {
        app = RedactorX('#editor');
    });

    return (
        <div>
            <h2>Home</h2>
            <textarea id="editor"></textarea>
        </div>
    );
}
function About() {
    if (app) {
        app.destroy();
    }
    return (
        <div>
            <h2>About</h2>
        </div>
    );
}

Component

And here's an example of creating a simple component for Redactor X:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './redactorx.css';
import RedactorX from './redactorx.js';

var app;

// Component
class RedactorXJs extends React.Component {
    componentDidMount() {
        app = RedactorX(ReactDOM.findDOMNode(this));
    }
    componentWillUnmount() {
        if (app) {
            app.destroy();
        }
    }
    render() {
        return <textarea></textarea>;
    }
}

// Render
ReactDOM.render(
    <RedactorXJs />,
    document.getElementById('root')
);