react-draft-wysiwyg

What is react-draft-wysiwyg?

The react-draft-wysiwyg package is a rich text editor component based on Draft.js. It provides a highly customizable and extensible WYSIWYG editor for React applications, allowing developers to integrate text editing capabilities with ease.

What are react-draft-wysiwyg's main functionalities?

Basic Editor

This code demonstrates how to set up a basic editor using react-draft-wysiwyg. The editor includes default toolbar options and basic styling.

import React from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const MyEditor = () => (
  <Editor
    toolbarClassName="toolbarClassName"
    wrapperClassName="wrapperClassName"
    editorClassName="editorClassName"
  />
);

export default MyEditor;

Custom Toolbar

This code shows how to customize the toolbar of the editor. You can specify which options to include and whether they should be displayed in dropdowns.

import React from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const MyEditor = () => (
  <Editor
    toolbar={{
      options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history'],
      inline: { inDropdown: true },
      list: { inDropdown: true },
      textAlign: { inDropdown: true },
      link: { inDropdown: true },
      history: { inDropdown: true },
    }}
  />
);

export default MyEditor;

Controlled Editor

This example demonstrates how to create a controlled editor component. The editor's state is managed using React's useState hook, allowing for more control over the editor's content.

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

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

  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={setEditorState}
    />
  );
};

export default MyEditor;

Image Upload

This code sample shows how to handle image uploads in the editor. The uploadImageCallBack function processes the image file and returns a promise with the image URL.

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

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

  const uploadImageCallBack = (file) => {
    return new Promise(
      (resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve({ data: { link: reader.result } });
        reader.readAsDataURL(file);
      }
    );
  };

  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={setEditorState}
      toolbar={{
        image: {
          uploadCallback: uploadImageCallBack,
          previewImage: true,
        },
      }}
    />
  );
};

export default MyEditor;

Other packages similar to react-draft-wysiwyg

draft-js

Draft.js is a framework for building rich text editors in React. It provides the core functionality for text editing, but requires more setup and customization compared to react-draft-wysiwyg. It is highly flexible and can be tailored to specific needs.

react-quill

React-Quill is a React component for Quill, a powerful rich text editor. It offers a wide range of features out of the box and is easy to integrate. Compared to react-draft-wysiwyg, React-Quill has a more extensive set of built-in features but may be less customizable.

slate

Slate is a completely customizable framework for building rich text editors. It provides a lot of flexibility and control over the editor's behavior and appearance. Slate requires more effort to set up and configure compared to react-draft-wysiwyg, but it offers unparalleled customization options.

README

Steps to see editor in action:

1. npm install
2. npm start

In browser open http://localhost:3000