Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jpuri/react-draft-wysiwyg
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
https://github.com/jpuri/react-draft-wysiwyg
draft-js javascript reactjs wysiwyg-editor
Last synced: 3 days ago
JSON representation
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
- Host: GitHub
- URL: https://github.com/jpuri/react-draft-wysiwyg
- Owner: jpuri
- License: mit
- Created: 2016-09-04T18:33:34.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-21T13:28:46.000Z (6 months ago)
- Last Synced: 2024-10-29T09:46:40.601Z (about 1 month ago)
- Topics: draft-js, javascript, reactjs, wysiwyg-editor
- Language: JavaScript
- Homepage:
- Size: 42.9 MB
- Stars: 6,417
- Watchers: 83
- Forks: 1,160
- Open Issues: 749
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-draft-wysiwyg - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/). (UI Components / Form Components)
- awesome-wysiwyg - React Draft Wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS. (For React)
- awesome-react - react-draft-wysiwyg - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/).  (UI Components / Form Components)
- awesome-list - react-draft-wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS. (Demos / Form Components)
- awesome-starts - jpuri/react-draft-wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg (JavaScript)
- awesome-react-components - react-draft-wysiwyg - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/). (UI Components / Form Components)
- awesome-react-components - react-draft-wysiwyg - A Wysiwyg editor build on top of ReactJS and DraftJS. (UI Components / Form Components)
- awesome-list - react-draft-wysiwyg - draft-wysiwyg | jpuri | 5213 | (JavaScript)
- awesome-wysiwyg-editors - React Draft Wysiwyg - 一个建立在 ReactJS 和 DraftJS 之上的 wysiwyg 编辑器。  (基于 React)
- awesome-react-components - react-draft-wysiwyg - WYSIWYG editor build on top of [DraftJS](https://draftjs.org/). (UI Components / Form Components)
- best-of-react - GitHub - 65% open · ⏱️ 12.06.2023): (Editor Components)
- fucking-awesome-react-components - react-draft-wysiwyg - WYSIWYG editor build on top of 🌎 [DraftJS](draftjs.org/). (UI Components / Form Components)
- awesome-draft-js - React-Draft-Wyiswyg - A WYISWYG editor, with various text editing options and corresponding HTML generation. (Standalone Editors Built on Draft.js)
README
# React Draft Wysiwyg
A Wysiwyg editor built using ReactJS and DraftJS libraries.
[Demo Page](https://jpuri.github.io/react-draft-wysiwyg).
[](https://travis-ci.org/jpuri/react-draft-wysiwyg)
## React Draft Wysiwyg AI Bot
[React Draft Wysiwyg](https://codeparrot.ai/oracle?owner=jpuri&repo=react-draft-wysiwyg) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
## 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:
```js
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
;
```
## Docs
For more documentation check [here](https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp).
## Questions Discussions
For discussions join public channel #rd_wysiwyg in [DraftJS Slack Organization](https://draftjs.herokuapp.com/).
## Fund
You can fund project at [Patreon](https://www.patreon.com/jyotipuri).
## Thanks
Original motivation and sponsorship for this work came from [iPaoo](http://www.ipaoo.com/). I am thankful to them for allowing the Editor to be open-sourced.
## License
MIT.