react-draft-wysiwyg alternatives and similar libraries
Based on the "Rich Text Editor" category.
Alternatively, view react-draft-wysiwyg alternatives based on common mentions on social networks and blogs.
-
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
alloyeditor
WYSIWYG editor based on CKEditor with completely rewritten UI -
react-contenteditable
React component for a div with editable contents -
megadraft
Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility -
react-medium-editor
React wrapper for medium-editor -
react-trumbowyg
React wrapper for lightweight WYSIWYG editor Trumbowyg
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-draft-wysiwyg or a related project?
README
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.
*Note that all licence references and agreements mentioned in the react-draft-wysiwyg README section above
are relevant to that project's source code only.