Skip to main content

React Installation

@editor42/editor42-react is a thin wrapper around Editor42 that makes it a React component. There is no account, no sign-up and no key of any kind.

Install​

npm install @editor42/editor42-react

or for Yarn users:

yarn add @editor42/editor42-react

React 16.7 and newer are supported, up to React 19.

Basic Setup​

import { Editor } from '@editor42/editor42-react';

export default function App() {
  return (
    <Editor
      initialValue="<p>Hello from Editor42</p>"
      init={{ height: 400 }}
    />
  );
}

With no extra props the editor script is loaded from https://cdn.editor42.com on the latest channel. That pointer only ever moves for security and bug-fix releases, because the Editor42 major version is fixed forever.

Reading and Writing the Content​

Pass value and onEditorChange to control the editor from your own state:

import { useState } from 'react';
import { Editor } from '@editor42/editor42-react';

export default function App() {
  const [content, setContent] = useState('<p>Hello from Editor42</p>');

  return (
    <Editor
      value={content}
      onEditorChange={(newContent) => setContent(newContent)}
      init={{ height: 400, plugins: 'lists link', toolbar: 'bold italic | bullist link' }}
    />
  );
}

Use initialValue instead when you only need a starting point and will read the content later.

Self-Hosting​

Point the component at your own copy of the script, using the full file URL:

<Editor editor42ScriptSrc="/js/editor42/editor42.min.js" />

An array is accepted for loading the editor plus separate bundles, and array items may set integrity and crossOrigin for CSP-hardened deployments. Passing an empty array opts out of script loading entirely, for pages that load the editor themselves.

Pinning a Version​

<Editor channel="42.0.0" />

channel accepts latest, a latest-N alias, or an exact version.

Editor Options​

Everything else is an Editor42 option, passed through init:

<Editor init={{ height: 400, menubar: false, plugins: 'lists link' }} />

See the Configuration Options for the full list.

Migrating from @tinymce/tinymce-react​

npm uninstall @tinymce/tinymce-react
npm install @editor42/editor42-react

Change the import to @editor42/editor42-react and you are done. Prop, event and component names are unchanged, and the old tinymceScriptSrc and cloudChannel props keep working as deprecated aliases of editor42ScriptSrc and channel.

All API-key and licence-key handling has been removed. The corresponding props are still accepted so existing code compiles, but they do nothing: no key is read, stored or sent anywhere, and no request ever reaches a vendor cloud.

The component also drives a stock TinyMCE if that is what is already loaded on the page, which keeps the switch reversible.

See the migration guide for the editor side of the move.

Live Demo​

See it running, with its full source: the React demo.