React editor demo: the N1ED component

When to use

You build your admin panel or CMS in React and want the editor as a component: set up by props, reporting its HTML to your state, and still carrying the whole N1ED toolset — blocks, widgets, the file manager and the image editor.

How it works

<N1ED> from @edsdk/n1ed-react is the TinyMCE React component with N1ED plugged in. The apiKey prop loads the editor with the configuration from the Dashboard, the init prop takes the usual TinyMCE options, and onEditorChange hands you the HTML on every change — the panel under the editor shows exactly that. The demo imports its packages from a CDN; in your app they come from npm.

How to start using

Install the N1ED React component from npm for that.

It is the TinyMCE React component with N1ED already plugged in, so the props you know from TinyMCE work unchanged.

Download ZIPOpen in CodePlay

Live Demo

JavaScript

import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {N1ED} from '@edsdk/n1ed-react';

const INITIAL = `
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <h2>N1ED in a React app</h2>
      <p>This is the <code>&lt;N1ED&gt;</code> component. Everything inside <code>init</code> is a plain TinyMCE option, and the API key brings the toolbar, the widgets and the file storage you set in the Dashboard.</p>
    </div>
    <div class="col-12 col-md-6">
      <img src="https://flmngr.democdn.com/files/default/Illustrations/people.png" alt="People working together" class="img-fluid"/>
    </div>
  </div>
</div>
`;

function App() {
  const [html, setHtml] = useState(INITIAL);

  return (
    <div>
      <N1ED
        apiKey="N1ED24RR1234123412341234"
        initialValue={INITIAL}
        onEditorChange={(content) => setHtml(content)}
        init={{
          height: 560
        }}
      />
      <h2 className="h6 mt-4">The HTML your app receives</h2>
      <pre className="state">{html.trim()}</pre>
    </div>
  );
}

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

HTML

<h1>N1ED in React</h1>
<p class="hint">The <code>&lt;N1ED&gt;</code> component from <code>@edsdk/n1ed-react</code>: TinyMCE with N1ED plugged in. Edit the content and the HTML below follows.</p>

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

SASS

.hint {
  color: var(--demo-muted-color);
}

#app {
  max-width: 1000px;
}

.state {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
}