# ngx-draft-js

> Angular 5 component wrapping Draft.js rich text editor

Latest version **1.0.16** (published 2018-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-draft-js
pnpm add ngx-draft-js
yarn add ngx-draft-js
bun add ngx-draft-js
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.16 |
| Published | 2018-02-09 |
| First published | 2018-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 100.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Anton Strogonoff |
| Maintainers | strogonoff |
| Keywords | angular, rich-text-editor, draft-js |

## Links

- npm: https://www.npmjs.com/package/ngx-draft-js
- Repository: https://github.com/strogonoff/ngx-draft-js
- Homepage: https://github.com/strogonoff/ngx-draft-js#readme
- Issues: https://github.com/strogonoff/ngx-draft-js/issues
- npm.io page: https://npm.io/package/ngx-draft-js

## Dependencies (1)

- [draft-js-export-html](https://npm.io/package/draft-js-export-html.md) ^1.2.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.16 (latest) — 2018-02-09
- 1.0.15 — 2018-02-09
- 1.0.14 — 2018-01-28
- 1.0.13 — 2018-01-28
- 1.0.12 — 2018-01-28
- 1.0.11 — 2018-01-28
- 1.0.10 — 2018-01-28
- 1.0.9 — 2018-01-28
- 1.0.8 — 2018-01-26
- 1.0.7 — 2018-01-25
- 1.0.6 — 2018-01-25
- 1.0.5 — 2018-01-25
- 1.0.4 — 2018-01-25
- 1.0.3 — 2018-01-25
- 1.0.2 — 2018-01-25
- … 3 more at https://npm.io/package/ngx-draft-js/versions

## README

# ngx-draft-js: Angular bindings for Draft.js

[![Travis CI Build Status](https://travis-ci.org/strogonoff/ngx-draft-js.svg?branch=master)](https://travis-ci.org/strogonoff/ngx-draft-js)
 
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

**ngx-draft-js** is an Angular library that wraps Draft.js
and ships with a configurable WYSIWYG editor component.
The editor is based on the official Draft.js example,
with HTML as markup export format.

The library is functioning and being used in production,
but while it’s at version 1.x it should be considered unstable
(e.g., your AOT build might start failing if you’re lazy-loading
this library’s modules using Angular’s router).

[**Demo**](https://ngx-draft-js-demo-6aa62.firebaseapp.com/ "Showcases rich editor functionality with bindings")
  
[NPM](https://www.npmjs.com/package/ngx-draft-js)
  
[GitHub](https://github.com/strogonoff/ngx-draft-js/)

**What’s Draft.js?** Developed at Facebook, Draft.js is a React-based framework
for building rich text editors. Read more about it at http://draftjs.org.

## Installation

ngx-draft-js is intended to be added to Angular 5 projects.

React, React DOM and Draft.js are all specified as peer dependencies as well,
so add them yourself if you haven’t them in your project:

    yarn add react react-dom draft-js

Install the package:

    yarn add ngx-draft-js


## Using the rich text editor

Sample module definition:

```typescript
import { DraftRichModue } from 'ngx-draft-js';
import { SomeComponentWithEditor } from './some.component';

@NgModule({
    declarations: [
        SomeComponentWithEditor,
    ],
    imports: [
        DraftRichModule,
    ],
})
export class SomeModule {}
```

Basic usage in a component:

```typescript
@Component({
    template: `
        <draft-rich-html
            (html)="onHtmlChange($event)"
            placeholder="Write a story">
        </draft-rich-html>
    `,
})
export class SomeComponentWithEditor {
    onHtmlChange($event: string) {
        console.debug('Got new HTML from the Draft.js editor', $event);
    }
}
```

### Component interface

Selector: ``draft-rich-html``

Bindings:

* ``[(html)]``: markup you get from the editor or initialize it with, HTML string
* ``[placeholder]``: self-explanatory, string
* ``[enableStyles]``: formatting options to display, a map of ``{ option label: boolean }`` (for possible labels see ``BLOCK_TYPES`` and ``INLINE_STYLES`` in [editors/rich.ts](https://github.com/strogonoff/ngx-draft-js/blob/master/angular-draft-js/editors/rich.ts))

See also: [**Demo**](https://ngx-draft-js-demo-6aa62.firebaseapp.com/).

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