Need help with react-draft-wysiwyg?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jpuri
4.9K Stars 866 Forks MIT License 820 Commits 497 Opened issues

Description

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg

Services available

!
?

Need anything else?

Contributors list

# 10,824
Shell
draft-j...
reactjs
nextjs
414 commits
# 90,836
JavaScr...
Shell
draft-j...
reactjs
14 commits
# 100,377
TypeScr...
Shell
draft-j...
reactjs
9 commits
# 123,796
JavaScr...
Shell
draft-j...
reactjs
6 commits
# 25,339
JavaScr...
Shell
draft-j...
reactjs
6 commits
# 160,021
JavaScr...
Shell
CSS
draft-j...
4 commits
# 79,973
draft-j...
reactjs
TypeScr...
algolia...
3 commits
# 179,500
JavaScr...
Shell
draft-j...
reactjs
3 commits
# 173,265
JavaScr...
Shell
CSS
draft-j...
3 commits
# 158,461
Shell
reactjs
HTML
TypeScr...
3 commits
# 25,249
Python
CSS
reactjs
Arch Li...
3 commits
# 180,087
JavaScr...
Shell
CSS
draft-j...
3 commits
# 180,088
JavaScr...
Shell
CSS
draft-j...
3 commits
# 37,300
reactjs
TypeScr...
HTML
faceboo...
3 commits
# 100,782
Shell
draft-j...
reactjs
MATLAB
2 commits
# 209,165
JavaScr...
Shell
draft-j...
reactjs
2 commits
# 149,106
JavaScr...
draft-j...
reactjs
Swift
2 commits
# 34,536
reactjs
HTML
macOS
stylus
2 commits
# 209,947
JavaScr...
Shell
CSS
draft-j...
2 commits
# 50,974
draft-j...
reactjs
swagger
openapi
2 commits

React Draft Wysiwyg

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

Build Status

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";
;

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.