React Draft Wysiwyg

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

Features

• Configurable toolbar with option to add/remove controls.
• 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.
• 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 adding / uploading images.
• Support for aligning images.
• Support for Embedded links.
• Option provided to remove added styling.
• Option of undo and redo.
• Support to convert Editor Content to HTML, JSON, Markdown.

Installing

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

Getting started

Editor can be used as simple React Component:

<Editor
  toolbarClassName="home-toolbar"
  wrapperClassName="home-wrapper"
  editorClassName="home-editor"
  onChange={this.onEditorChange}
  uploadCallback={uploadImageCallBack}
/>

Docs

For more documentation check here.

Questions Discussions

For discussions join public channel #rd-wysiwyg in DraftJS Slack Organization.

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.