Editor42 in a React app

When to use

When the editor has to live in a React app and its content belongs to your component state — a form field, a CMS page editor, a comment box.

How it works

The <Editor> component from @editor42/editor42-react, controlled: value in, onEditorChange out, so the HTML under the box is the state React holds. Everything inside init is a plain Editor42 option, and the editor script itself is fetched from the CDN unless you point editor42ScriptSrc at your own copy.

How to start using

Install the component with npm install @editor42/editor42-react and drop <Editor> into your JSX. With no extra props it loads the editor from cdn.editor42.com — no account, no key.

See the React install page for controlled usage, self-hosting and the move from @tinymce/tinymce-react.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Editor} from '@editor42/editor42-react';

const INITIAL = `
<h2>Editor42 in a React app</h2>
<p>This is the <code>&lt;Editor&gt;</code> component from <code>@editor42/editor42-react</code>. It is a controlled component here: every keystroke goes through React state, so the HTML under the box updates as you type.</p>
<ul>
  <li>Pass <code>value</code> and <code>onEditorChange</code> to control it</li>
  <li>Pass <code>initialValue</code> instead if you only need a starting point</li>
  <li>Everything inside <code>init</code> is a plain Editor42 option</li>
</ul>
`;

function App() {
  const [content, setContent] = useState(INITIAL);

  return (
    <div>
      <Editor
        value={content}
        onEditorChange={(newContent) => setContent(newContent)}
        init={{
          height: 420,
          menubar: false,
          plugins: 'lists link code',
          toolbar: 'undo redo | bold italic | bullist numlist | link code',
          content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; }'
        }}
      />
      <h2 className="h6 mt-3">Your state, live</h2>
      <pre className="state">{content.trim()}</pre>
    </div>
  );
}

createRoot(document.getElementById('app')).render(<App/>);

HTML

<h1>Editor42 in React</h1>
<p class="hint">The <code>@editor42/editor42-react</code> component, driven by React state.</p>

<div id="app"></div>

SASS

.hint {
  margin-bottom: 20px;
  color: var(--demo-muted-color);
}

.state {
  max-height: 160px;
  overflow: auto;
  padding: 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 13px;
  white-space: pre-wrap;
}