How to integrate the React Draft WYSIWYG editor in Next.j

React draft Nextjs text editor ? Learn how to integrate React draft Nextjs text editor is a powerful text editor that has a responsive and friendly user interface . it is for editing and writing text . Draftjs provides you with a rich text editor along with an intuitive interface. Draft.js is a React component, that is mainly built for React Draft WYSIWYG. WYSIWYG means what you see is what you get. It helps to give you an easy way to integrate WYSIWYG into a React application. Here’s a step-by-step tutorial to integrate React Draft WYSIWYG with Next.js

Step 1: Set Up a Next.js Project

First, create a new Next.js project if you don’t already have one:

npx create-next-app my-nextjs-draft-wysiwyg cd my-nextjs-draft-wysiwyg

This work of this command is to creates a new Next.js project in the `my-nextjs-draft-wysiwyg` directory.

Step 2: Install Required Packages

You need to install react-draft-wysiwyg and its peer dependencies:

npm install react-draft-wysiwyg draft-js

This command will installs the React Draft WYSIWYG package and Draft.js, which is required by React Draft WYSIWYG.

Step 3: Create a WYSIWYG Editor Component

1. Create a new file called `WysiwygEditor.js` in the `components` directory (create the `components` directory if it doesn’t exist).

2. Add the following code to `WysiwygEditor.js`:

import React, { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor, EditorState as REditorState } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const WysiwygEditor = () => {
  const [editorState, setEditorState] = useState(REditorState.createEmpty());

  const handleEditorChange = (newState) => {
    setEditorState(newState);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onEditorStateChange={handleEditorChange}
        toolbar={{
          options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'colorPicker', 'link', 'embedded'],
        }}
      />
    </div>
  );
};

export default WysiwygEditor;

Explanation

useState Hook: This code Initializes the editor state to an empty state using this code here `REditorState.createEmpty()`.

Editor Component: This `Editor` component `react-draft-wysiwyg` is used to render the rich text editor into your nextjs Application.

Quill editor next js integration process in Nextjs

Toolbar Options: The `toolbar` prop configures makes the text editor to have available options in the editor’s toolbar, such as inline styles, block types, font size, and so many others.

Styling: This Importnis responsible for making the `react-draft-wysiwyg` CSS to ensure the editor is styled correctly.

Step 4: Use the WYSIWYG Editor Component in a Page

Now that the WYSIWYG editor component is ready, use it in a Next.js page.

1. Open `pages/index.js`.

2. Import and use the `WysiwygEditor` components.

import Head from 'next/head';
import WysiwygEditor from '../components/WysiwygEditor';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Next.js React Draft WYSIWYG Editor</title>
        <meta name="description" content="A Next.js app with React Draft WYSIWYG editor integration" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>Welcome to the React Draft WYSIWYG Editor Example</h1>
        <WysiwygEditor />
      </main>

      <footer>
        <p>Powered by Next.js and React Draft WYSIWYG</p>
      </footer>
    </div>
  );
}

Step 5: Run the Next.js Application

Start your Next.js application by running:

npm run dev

This command starts the development server. You can access your application at `http://localhost:3000`.

Step 6: Customize the WYSIWYG Editor

This sections is all about customization if you want you can configure the text editor to suit your needs . Add more toolbar options to make the draftjs more beautiful or integrate it with other Draft.js features.

Adding Custom Toolbar Options in React

To add or remove toolbar options, modify the `toolbar` prop in the `Editor` component:

<Editor
  editorState={editorState}
  onEditorStateChange={handleEditorChange}
  toolbar={{
    options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'colorPicker', 'link', 'embedded'],
    inline: { inDropdown: true },
    blockType: { inDropdown: true },
    fontSize: { options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72] },
    list: { inDropdown: true },
    textAlign: { inDropdown: true },
    colorPicker: { colors: ['#D50000', '#C62828', '#AD1457', '#880E4F', '#4A148C', '#311B92', '#1E88E5', '#01579B', '#00ACC1', '#004D40', '#1B5E20', '#33691E', '#827717', '#F9A825', '#FF6F00', '#E65100', '#BF360C', '#3E2723', '#4E342E', '#3D3D3D', '#616161', '#9E9E9E', '#E0E0E0', '#F5F5F5', '#FAFAFA', '#FFFFFF'] },
    link: { inDropdown: true },
  }}
/>

Explanation;

Toolbar Options: Customize which options appear in the toolbar and their configuration.

Colors: Add custom color options for the color picker.

Handling Editor State in React draft Nextjs text editor

To manage and persist the editor’s state, you might want to integrate with local storage, a backend API, or use a state management library.

Here’s a simple example of saving and loading content from local storage:

import React, { useState, useEffect } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const WysiwygEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  useEffect(() => {
    const savedContent = localStorage.getItem('editorContent');
    if (savedContent) {
      setEditorState(EditorState.createWithContent(savedContent));
    }
  }, []);

  const handleEditorChange = (newState) => {
    setEditorState(newState);
    localStorage.setItem('editorContent', newState.getCurrentContent().toJS());
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onEditorStateChange={handleEditorChange}
        toolbar={{
          options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'colorPicker', 'link', 'embedded'],
        }}
      />
    </div>
  );
};

export default WysiwygEditor;

Explanation:

useEffect Hook: This Loads the saved content from local storage when the component is mounts.
Local Storage: it Saves the editor content to local storage whenever it changes.