react-draft-wysiwyg

React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries. Demo Page.

Features

• Configurable toolbar with option to add/remove controls.
• Option to change the order of the controls in the toolbar.
• Option to add custom controls to the toolbar.
• Option to change styles and icons in the toolbar.
• Option to show toolbar only when editor is focused.
• Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
• Support for block types: Paragraph, H1 - H6, Blockquote, Code.
• Support for setting font-size and font-family.
• Support for ordered / unordered lists and indenting.
• Support for text-alignment.
• Support for coloring text or background.
• Support for adding / editing links
• Choice of more than 150 emojis.
• Support for mentions.
• Support for hashtags.
• Support for adding / uploading images.
• Support for aligning images, setting height, width.
• Support for Embedded links, flexibility to set height and width.
• Option provided to remove added styling.
• Option of undo and redo.
• Configurable behavior for RTL and Spellcheck.
• Support for placeholder.
• Support for WAI-ARIA Support attributes
• Using editor as controlled or un-controlled React component.
• Support to convert Editor Content to HTML, JSON, Markdown.
• Support to convert the HTML generated by the editor back to editor content.
• Support for internationalization.

Installing

The package can be installed from npm react-draft-wysiwyg

$ npm install --save react-draft-wysiwyg draft-js

Getting started

Editor can be used as simple React Component:

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
<Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
/>;

Docs

For more documentation check here.

Questions Discussions

For discussions join public channel #rd_wysiwyg in DraftJS Slack Organization.

Fund

You can fund project at Patreon.

Thanks

Original motivation and sponsorship for this work came from iPaoo. I am thankful to them for allowing the Editor to be open-sourced.

License

MIT.

Similar packages

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.