Skip to main content

Install N1ED React component

Get the NPM package​

Install N1ED React package being in the directory of your project by NPM tool:

npm install --save @edsdk/n1ed-react

or for Yarn users

yarn add @edsdk/n1ed-react

Use N1ED component​

Let's use N1ED in your project. Open your source file and in the top of it add new import:

import {N1ED} from "@edsdk/n1ed-react";

Then inside render() method add N1ED component definition:

import React from 'react';
import {N1ED} from '@edsdk/n1ed-react';
import {Editor} from 'tinymce';

// ... and somewhere in render() function:
<N1ED
    apiKey={"N1ED24RR1234123412341234"}
    initialValue="<p>N1ED react demo</p>"
    onEditorChange={(htmlContent: string) => {
        // receive changes 
    }}
/>;

apiKey can be found in the Dashboard.

You can also see demo TypeScript project on GitHub as example of use.

Install the backend​

Now you need to install the file manager server-side script somewhere on your server to enable file manager functionalities in your editor. Follow the instructions behind the link on how to do it.

Check your installation​

Now you can edit your articles with the power of N1ED. Go to your content and check N1ED in the action.

Configuration​

The component takes only your API key. The toolbar, widgets, Bootstrap blocks and the file storage are configured for that key in the Dashboard.

Dashboard

Examples​

A live demo of the component in a React app, with its code.