Menu
Redactor
Documentation / Get Started

React setup

Redactor Object #

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


// main.jsx
import React from 'react'
import ReactDOM from 'react-dom';

// import Redactor
import './redactor.min.css';
import Redactor from './redactor.usm.min.js';

// call
let editor = Redactor('#editor');


<!-- index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <textarea id="editor">...</textarea>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Connect plugins


// main.jsx
import React from 'react';

// import Redactor
import './redactor.min.css';
import Redactor from './redactor.js';

// import plugin
import './emoji.min.js';

// call
let editor = Redactor('#editor', {
    plugins: ['emoji']
});

Component #

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


// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import RedactorJS from './RedactorJS.jsx';

// Render
ReactDOM.createRoot(document.getElementById('root')).render(
     <RedactorJS />,
)


// RedactorJS.jsx
import React, { useEffect, useRef } from 'react';
import './redactor.min.css';
import Redactor from './redactor.usm.min.js';
import './emoji.js';

const RedactorJS = ({ opts }) => {
  const textAreaRef = useRef(null);

  useEffect(() => {
    let editor;
    let opts = {
        plugins: ['emoji'],
        content: 'Hello World!'
    };
    if (textAreaRef.current) {
      editor = Redactor(textAreaRef.current, opts);
    }

    return () => {
      if (editor) {
        editor.destroy();
      }
    };
  }, [opts]);

  return <textarea ref={textAreaRef}></textarea>;
};

export default RedactorJS;


<!-- index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Multi-page app #

You may want to destroy the Redactor 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:


let editor;
function Home() {
    useEffect(() => {
        editor = Redactor('#editor');
    });

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