{"id":18382525,"url":"https://github.com/dimpu/ngx-quill","last_synced_at":"2025-04-11T21:25:57.347Z","repository":{"id":71413526,"uuid":"154034043","full_name":"dimpu/ngx-quill","owner":"dimpu","description":"ngx-quill","archived":false,"fork":false,"pushed_at":"2019-04-28T04:59:33.000Z","size":3523,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-15T23:42:14.743Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dimpu.github.io/ngx-quill/","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/dimpu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-21T17:26:15.000Z","updated_at":"2022-08-24T14:40:41.000Z","dependencies_parsed_at":"2023-03-27T08:16:17.577Z","dependency_job_id":null,"html_url":"https://github.com/dimpu/ngx-quill","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimpu%2Fngx-quill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimpu%2Fngx-quill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimpu%2Fngx-quill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimpu%2Fngx-quill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimpu","download_url":"https://codeload.github.com/dimpu/ngx-quill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248481805,"owners_count":21111220,"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":[],"created_at":"2024-11-06T01:06:23.286Z","updated_at":"2025-04-11T21:25:57.300Z","avatar_url":"https://github.com/dimpu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-quill [![Build Status](https://travis-ci.org/dimpu/ngx-quill.svg?branch=develop)](https://travis-ci.org/dimpu/ngx-quill)\nAngular (\u003e=2) component for rich text editor Quill\n\n# Example\n[Demo Page](https://dimpu.github.io/ngx-quill/)\n\n\n### Installation\n\n``` bash\nnpm install @dimpu/ngx-quill --save\n```\n\n### Sample\n\nInclude NgxQuillModule in your main module:\n``` typescript\nimport { NgxQuillModule } from '@dimpu/ngx-quill';\n\n@NgModule({\n  // ...\n  imports: [\n    NgxQuillModule\n  ],\n  // ...\n})\nexport class AppModule {}\n```\n\nThen use it in your component:\n\n``` html\n\u003c!-- use with ngModel --\u003e\n\u003cngx-quill [(ngModel)]=\"editorContent\"\n              [options]=\"editorOptions\"\n              (blur)=\"onEditorBlured($event)\"\n              (focus)=\"onEditorFocused($event)\"\n              (ready)=\"onEditorCreated($event)\"\n              (change)=\"onContentChanged($event)\"\u003e\u003c/ngx-quill\u003e\n\n\n\u003c!-- or use with formControl --\u003e\n\u003cngx-quill [formControl]=\"editorContent\"\n            [options]=\"editorOptions\"\n            (blur)=\"onEditorBlured($event)\"\n            (focus)=\"onEditorFocused($event)\"\n            (ready)=\"onEditorCreated($event)\"\n            (change)=\"onContentChanged($event)\"\u003e\u003c/ngx-quill\u003e\n```\n\n``` javascript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'sample',\n  template: require('./sample.html')\n})\nexport class Sample {\n\n  public editor;\n  public editorContent = `\u003ch3\u003eI am Example content\u003c/h3\u003e`;\n  public editorOptions = {\n    placeholder: \"insert content...\"\n  };\n\n  constructor() {}\n\n  onEditorBlured(quill) {\n    console.log('editor blur!', quill);\n  }\n\n  onEditorFocused(quill) {\n    console.log('editor focus!', quill);\n  }\n\n  onEditorCreated(quill) {\n    this.editor = quill;\n    console.log('quill is ready! this is current quill instance object', quill);\n  }\n\n  onContentChanged({ quill, html, text }) {\n    console.log('quill content is changed!', quill, html, text);\n  }\n\n  ngOnInit() {\n    setTimeout(() =\u003e {\n      this.editorContent = '\u003ch1\u003econtent changed!\u003c/h1\u003e';\n      console.log('you can use the quill instance object to do something', this.editor);\n      // this.editor.disable();\n    }, 2800)\n  }\n\n  onReady(quill) {\n    const customButton = document.querySelector('#custom-button');\n    customButton.addEventListener('click', function() {\n      const range = quill.getSelection();\n      if (range) {\n        quill.insertText(range.index, 'Ω');\n      }\n    });\n  }\n\n  \n\n}\n```\n\n\n### Configuration\n- options : The configuration object for quill see https://quilljs.com/docs/quickstart/\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimpu%2Fngx-quill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimpu%2Fngx-quill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimpu%2Fngx-quill/lists"}