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.

Changelog

22/11/2016 (1.0.0)

Initial stable release

29/11/2016 (1.1.1)

• 62: Toolbar behaves weird at times if toolbarOnFocus is set.

• 73: Making spell check configurable.

• 74: Allow user to use RTL.

• 69: Prefix 'rdw-' to all class names.

• 70: Avoid 'undefined' class name.

• 65: Cannot set bold/italics/underline without any text highlighted.

29/11/2016 (1.1.2)

• 35: use of tab for indenting is broken

• 30: As user types after link the new text should not be linkified.

• 92: Inputs in toolbar can not be focused.

1/12/2016 (1.1.3)

• 94: Support ReadOnly mode.

• 84: Developer to be able to update editor editor content.

5/12/2016 (1.2.0)

• 80: It should be possible for user to set size of embedded media.

• 75: Issue in image, embedded link.

• 66: Multiple toolbar modals open causes bugs.

• 31: Popups in toolbar should close when user clicks anywhere else on the page.

• 20: It should be possible for user to provide image size also.

7/12/2016 (1.2.1)

• 109: Link control behaving weird to events.

• 105: Adding placeholder support.

• 59: Mentions should get deleted on whole by single backspace.

• 61: Unlink should not get highlighted for mentions.

7/12/2016 (1.3.0)

• 56: Improvements in mention dropdown.

7/12/2016 (1.3.1)

• 115: uncaught TypeError: t.suggestionCallback is not a function.

10/12/2016 (1.3.2)

• 120: Toolbar modals closing prematurely.

14/12/2016 (1.3.3)

• 126: Rehydrating editor state with mention gives error.

25/12/2016

• 142: Selection state broken when using contentState and onContentStateChange props.

• 140: Request: customizable blockTypes.

22/01/2017

• 181: Ability to add custom block renderer.

• 183: Default toolbar order by config.

25/01/2017

• 176: image upload issue: drag and drop

10/02/2017

• 127: Support for hashtags.

09/07/2017 (1.10.2)

• 348: Reduce bindle size by making ImmutableJS external dependency.

14/07/2017 (1.10.5)

• 393: Lots of toolbar icons not working when multiple editors are rendered.

19/07/2017 (1.10.6)

• 247: When you drag and drop an image in the image uploader from another browser it crashes.

• 389: Hiding toolbar should not destroy the component.

• Fixing broken mentions.

20/07/2017 (1.10.7)

• 380: add support for alt field.

• 325: internalization of titles.

18/08/2017 (1.10.8)

• Support for code block.

10/09/2017 (1.10.8)

• 429: Copy paste issue in code block.

• 440: Limit pre and blockquote styles to only within the wysiwyg.

• Translations for Italian locale.

19/09/2017 (1.10.10)

• 451: Indent, outdent enabled only for lists.

20/09/2017 (1.10.11)

• 437: Disabling the toolbar buttons is not disabling the corresponding keyboard shortcut

23/09/2017 (1.10.12)

• 444: Images not copied when copying content from microsoft word.

• Translations for de and nl locales.

7/12/2017 (1.12.0)

• Adding custom component for rendering of mentions and hashtags.
• Using targetOption property to save target of link.

18/12/2017 (1.12.1)

• Changes in German Translations.
• Using linkify-it to linkify link targets.

25/12/2017 (1.12.2)

• 502, In some scenario, editor does not extract inline style when editorState is changed

1/1/2018 (1.12.3)

• Adding UMD module bundling.

8/1/2018 (1.12.3)

• 514, Avoid error when an alignment is not defined.

• 555, Image preview option.

15/1/2018

• 549, stripPastedStyles not working.

25/1/2018

• Adding ref property to editor to get teference of underlying DraftJS editor.

26/1/2018

• 581, onBlur not firing.

14/2/2018 (1.12.9)

• 425, text alignment broken for multiple text.

• 549, Prop stripPastedStyles is ignored.

• Support for Japanese locale.

4/3/2018 (1.12.11)

• 621, variable declaration causes handlePastedText function error after js minified.

16/4/2018 (1.12.12)

• 630, Passing editorState into onBlur callback.

• 642, Fix an error when a tab failed to open.

25/4/2018 (1.12.13)

• Bundle size optimization.