https://github.com/strogonoff/ngx-draft-js
Quickly add React-powered Draft.js to Angular-based apps.
https://github.com/strogonoff/ngx-draft-js
angular5 draft-js wysiwyg-editor
Last synced: 10 months ago
JSON representation
Quickly add React-powered Draft.js to Angular-based apps.
- Host: GitHub
- URL: https://github.com/strogonoff/ngx-draft-js
- Owner: strogonoff
- License: mit
- Created: 2018-01-25T10:55:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T14:42:00.000Z (over 3 years ago)
- Last Synced: 2025-06-19T18:58:04.483Z (10 months ago)
- Topics: angular5, draft-js, wysiwyg-editor
- Language: TypeScript
- Homepage:
- Size: 1.95 MB
- Stars: 11
- Watchers: 1
- Forks: 3
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-draft-js: Angular bindings for Draft.js
[](https://travis-ci.org/strogonoff/ngx-draft-js)
[](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 { DraftRichModule } 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: `
`,
})
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/).