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 React, {Component} from 'react';
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')
);

NextJs dynamic import

This is an example of how you can load Article Editor in NextJS using the dynamic import option.

import React, { useEffect } from 'react';

export default function Articlejs() {
    useEffect(() => {
        let app;
        async function loadEditor() {
            const ArticleEditor = (await import('@/lib/article/article-editor')).default;

            app = ArticleEditor('#editor', {
                css: '/css/'
            });
        }

        loadEditor();

        return () => app.destroy();
    }, []);

    return (
        <div>
            <textarea id="editor"></textarea>
        </div>
    );
}