Documentation

ReactJs

Article Object #

Article 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 Article 2
import './static/article-editor.css';
import ArticleEditor from './static/article-editor.js';

// call
ArticleEditor('#editor', {
    css: '/path-to-article-css/'
});

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

import ArticleEditor from './static/article-editor';

After that you can run the Article with the plugins:

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

// import Article 2
import './static/article-editor.css';
import ArticleEditor from './static/article-editor.js';
import './static/reorder.js';

// call
ArticleEditor('#editor', {
    plugins: ['reorder'],
    css: '/path-to-article-css/'
});

Multi-page app #

You may want to destroy the Article 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 = ArticleEditor('#editor', {
            css: '/css/'
        });
    });

    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 Article:

import ReactDOM from 'react-dom';
import './article-editor.css';
import ArticleEditor from './article-editor.js';

var app;

// Component
class ArticleJs extends React.Component {
    componentDidMount() {
        app = ArticleEditor(ReactDOM.findDOMNode(this), {
            css: '/css/'
        });
    }
    componentWillUnmount() {
        if (app) {
            app.destroy();
        }
    }
    render() {
        return <textarea></textarea>;
    }
}

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