# react-draft-wysiwyg

> A wysiwyg on top of DraftJS.

Latest version **1.15.0** (published 2022-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-draft-wysiwyg
pnpm add react-draft-wysiwyg
yarn add react-draft-wysiwyg
bun add react-draft-wysiwyg
```

## Health

**Score 13/100 (F)** — status: abandoned.

Positive: has types package; high quality score.

Warnings: low downloads; no esm support; has vulnerabilities.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.15.0 |
| Published | 2022-07-17 |
| First published | 2016-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-draft-wysiwyg) |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 292.2 KB |
| Known vulnerabilities | 1 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6461 |
| Author | Jyoti Puri |
| Maintainers | jyotipuri |

## Links

- npm: https://www.npmjs.com/package/react-draft-wysiwyg
- Repository: https://github.com/jpuri/react-draft-wysiwyg
- Homepage: https://github.com/jpuri/react-draft-wysiwyg#readme
- Issues: https://github.com/jpuri/react-draft-wysiwyg/issues
- npm.io page: https://npm.io/package/react-draft-wysiwyg

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [linkify-it](https://npm.io/package/linkify-it.md) ^2.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [draftjs-utils](https://npm.io/package/draftjs-utils.md) ^0.10.2
- [html-to-draftjs](https://npm.io/package/html-to-draftjs.md) ^1.5.0

## Recent versions

- 1.15.0 (latest) — 2022-07-17
- 1.14.7 — 2021-05-05
- 1.14.6 — 2021-04-17
- 1.14.5 — 2020-04-19
- 1.14.4 — 2020-01-10
- 1.14.3 — 2020-01-03
- 1.14.2 — 2020-01-03
- 1.14.1 — 2019-12-12
- 1.14.0 — 2019-12-08
- 1.13.2 — 2019-03-03
- 1.13.1 — 2019-01-30
- 1.13.0 — 2019-01-28
- 1.12.20 — 2019-01-12
- 1.12.19 — 2019-01-04
- 1.12.18 — 2018-12-27
- … 116 more at https://npm.io/package/react-draft-wysiwyg/versions

## README

# React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries.
[Demo Page](https://jpuri.github.io/react-draft-wysiwyg).

[![Build Status](https://travis-ci.org/jpuri/react-draft-wysiwyg.svg?branch=master)](https://travis-ci.org/jpuri/react-draft-wysiwyg)

![](http://i.imgur.com/tU7kJ6i.gif)

## 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";
<Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
/>;
```

## 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.

---
_Source: https://npm.io/package/react-draft-wysiwyg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._