{"id":21147915,"url":"https://github.com/strogonoff/ngx-draft-js","last_synced_at":"2025-07-09T07:33:18.455Z","repository":{"id":28626415,"uuid":"118901509","full_name":"strogonoff/ngx-draft-js","owner":"strogonoff","description":"Quickly add React-powered Draft.js to Angular-based apps.","archived":false,"fork":false,"pushed_at":"2022-12-08T14:42:00.000Z","size":2043,"stargazers_count":11,"open_issues_count":27,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-19T18:58:04.483Z","etag":null,"topics":["angular5","draft-js","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/strogonoff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-25T10:55:37.000Z","updated_at":"2021-01-13T05:35:54.000Z","dependencies_parsed_at":"2022-09-11T16:21:12.544Z","dependency_job_id":null,"html_url":"https://github.com/strogonoff/ngx-draft-js","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/strogonoff/ngx-draft-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strogonoff%2Fngx-draft-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strogonoff%2Fngx-draft-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strogonoff%2Fngx-draft-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strogonoff%2Fngx-draft-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/strogonoff","download_url":"https://codeload.github.com/strogonoff/ngx-draft-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/strogonoff%2Fngx-draft-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261945352,"owners_count":23234234,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular5","draft-js","wysiwyg-editor"],"created_at":"2024-11-20T09:19:15.726Z","updated_at":"2025-07-09T07:33:18.066Z","avatar_url":"https://github.com/strogonoff.png","language":"TypeScript","readme":"# ngx-draft-js: Angular bindings for Draft.js\n\n[![Travis CI Build Status](https://travis-ci.org/strogonoff/ngx-draft-js.svg?branch=master)](https://travis-ci.org/strogonoff/ngx-draft-js)\n\u0026ensp;\n[![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)\n\n**ngx-draft-js** is an Angular library that wraps Draft.js\nand ships with a configurable WYSIWYG editor component.\nThe editor is based on the official Draft.js example,\nwith HTML as markup export format.\n\nThe library is functioning and being used in production,\nbut while it’s at version 1.x it should be considered unstable\n(e.g., your AOT build might start failing if you’re lazy-loading\nthis library’s modules using Angular’s router).\n\n[**Demo**](https://ngx-draft-js-demo-6aa62.firebaseapp.com/ \"Showcases rich editor functionality with bindings\")\n\u0026emsp;\u0026emsp;\n[NPM](https://www.npmjs.com/package/ngx-draft-js)\n\u0026emsp;\u0026emsp;\n[GitHub](https://github.com/strogonoff/ngx-draft-js/)\n\n**What’s Draft.js?** Developed at Facebook, Draft.js is a React-based framework\nfor building rich text editors. Read more about it at http://draftjs.org.\n\n## Installation\n\nngx-draft-js is intended to be added to Angular 5 projects.\n\nReact, React DOM and Draft.js are all specified as peer dependencies as well,\nso add them yourself if you haven’t them in your project:\n\n    yarn add react react-dom draft-js\n\nInstall the package:\n\n    yarn add ngx-draft-js\n\n\n## Using the rich text editor\n\nSample module definition:\n\n```typescript\nimport { DraftRichModule } from 'ngx-draft-js';\nimport { SomeComponentWithEditor } from './some.component';\n\n@NgModule({\n    declarations: [\n        SomeComponentWithEditor,\n    ],\n    imports: [\n        DraftRichModule,\n    ],\n})\nexport class SomeModule {}\n```\n\nBasic usage in a component:\n\n```typescript\n@Component({\n    template: `\n        \u003cdraft-rich-html\n            (html)=\"onHtmlChange($event)\"\n            placeholder=\"Write a story\"\u003e\n        \u003c/draft-rich-html\u003e\n    `,\n})\nexport class SomeComponentWithEditor {\n    onHtmlChange($event: string) {\n        console.debug('Got new HTML from the Draft.js editor', $event);\n    }\n}\n```\n\n### Component interface\n\nSelector: ``draft-rich-html``\n\nBindings:\n\n* ``[(html)]``: markup you get from the editor or initialize it with, HTML string\n* ``[placeholder]``: self-explanatory, string\n* ``[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))\n\nSee also: [**Demo**](https://ngx-draft-js-demo-6aa62.firebaseapp.com/).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrogonoff%2Fngx-draft-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstrogonoff%2Fngx-draft-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstrogonoff%2Fngx-draft-js/lists"}