🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill
GitHub - KillerCodeMonkey/ngx-quill: Angular (>=2) components for the Quill Rich Text Editor · GitHub
Angular (>=2) components for the Quill Rich Text Editor - KillerCodeMonkey/ngx-quill
Starred by 1.8K users
Forked by 273 users
Languages   TypeScript 96.3% | JavaScript 3.7%
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill-example
GitHub - KillerCodeMonkey/ngx-quill-example: demo app for the advanced usage of ngx-quill module · GitHub
The demo app for the usage of the ngx-quill module. This project was generated with Angular CLI version 17.0.0.
Starred by 231 users
Forked by 131 users
Languages   TypeScript 65.0% | HTML 29.0% | SCSS 6.0%
🌐
GitHub
github.com › zefoy › ngx-quill-wrapper
GitHub - zefoy/ngx-quill-wrapper: Angular wrapper library for Quill
import { QuillModule } from 'ngx-quill-wrapper'; import { QUILL_CONFIG } from 'ngx-quill-wrapper'; import { QuillConfigInterface } from 'ngx-quill-wrapper'; const DEFAULT_QUILL_CONFIG: QuillConfigInterface = { theme: 'snow', modules: { toolbar: true }, placeholder: 'Empty canvas' }; @NgModule({ ... imports: [ ... QuillModule ], providers: [ { provide: QUILL_CONFIG, useValue: DEFAULT_QUILL_CONFIG } ] })
Starred by 13 users
Forked by 3 users
Languages   TypeScript 72.3% | HTML 18.5% | CSS 8.5% | JavaScript 0.7% | TypeScript 72.3% | HTML 18.5% | CSS 8.5% | JavaScript 0.7%
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill-example › blob › master › angular.json
ngx-quill-example/angular.json at master · KillerCodeMonkey/ngx-quill-example
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "ngx-quill-example": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/ngx-quill-example", "index": "src/index.html",
Author   KillerCodeMonkey
🌐
CodeSandbox
codesandbox.io › examples › package › ngx-quill
ngx-quill examples - CodeSandbox
jira-clone-angular-frontend · fury · archencilTesting software. ngx-quill-ionic · dukelionstt/dndpn · Find more examples or templates · AboutAngular components for the easy use of the QuillJS richt text editor.323,830Weekly Downloads · Latest version30.0.1 · LicenseMIT · External Links · github.com/KillerCodeMonkey/ngx-quill ·
🌐
GitHub
github.com › arghyaiitb › ngx-quill-v2
GitHub - arghyaiitb/ngx-quill-v2: An angular (>=2) component for the Quill Rich Text Editor · GitHub
ngx-quill-v2 is an angular (>=2) component for the Quill Rich Text Editor v2 dev version. I have kept the link of all the existing examples from ngx-quill.
Forked by 2 users
Languages   TypeScript 95.1% | JavaScript 4.9%
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill-angular-cli
GitHub - KillerCodeMonkey/ngx-quill-angular-cli: example of ngx-quill and angular cli
September 19, 2018 - The demo app for the usage of the ngx-quill module with the angular-cli.
Starred by 2 users
Forked by 4 users
Languages   TypeScript 63.8% | JavaScript 18.4% | HTML 15.7% | CSS 2.1% | TypeScript 63.8% | JavaScript 18.4% | HTML 15.7% | CSS 2.1%
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill-universal-example
GitHub - KillerCodeMonkey/ngx-quill-universal-example: ngx-quill-universal-example
The demo app for the usage of the ngx-quill module with ssr and angular universal.
Starred by 7 users
Forked by 5 users
Languages   TypeScript 89.3% | JavaScript 8.2% | HTML 1.6% | CSS 0.9% | TypeScript 89.3% | JavaScript 8.2% | HTML 1.6% | CSS 0.9%
Find elsewhere
🌐
GitHub
github.com › KillerCodeMonkey › angular-18-ngx-quill-26.0.4
GitHub - KillerCodeMonkey/angular-18-ngx-quill-26.0.4: working example - no parchment missing type error
working example - no parchment missing type error. Contribute to KillerCodeMonkey/angular-18-ngx-quill-26.0.4 development by creating an account on GitHub.
Author   KillerCodeMonkey
Top answer
1 of 3
34

Follow these steps it should work:

1- Installation:

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/platform-browser
 npm install quill
 npm install rxjs — peer dependencies of rxjs-quill
  • include theme stylings: bubble.css, snow.css of quilljs in your index.html, or add them in your css/scss files with @import statements, or add them external stylings in your build process.

Update the angular.json file with the following code:

  “styles”: [
          “./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
          “src/styles.css”,
          “./node_modules/quill/dist/quill.core.css”,
          “./node_modules/quill/dist/quill.snow.css”
        ],
        “scripts”: [“./node_modules/quill/dist/quill.js”]

import it in your app.module.ts

   import { QuillModule } from 'ngx-quill'

and in the imports add it like bellow

 @NgModule({
  declarations:[],
  imports:[
    CommonModule,
    QuillModule.forRoot(),
  ]
 })

in your component.ts file you can modify the editor style like bellow code:

   editorStyle = {
     height: '200px'
   };

and in your component.html file you could call it like bellow code:

 <div id="quill">
                <p>Content *</p>
                <quill-editor [styles]="editorStyle" placeholder="Enter Text" [modules]="config"
                    formControlName="yourCtrlname" required>
                </quill-editor>
            </div>

You can also check: https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/

and here: https://www.npmjs.com/package/ng-quill

2 of 3
6

It means you haven't configured that library properly, particularly you should be importing QuillModule.forRoot() so that all delivered with this library providers are properly initialized.

@NgModule({
  imports: [
    BrowserModule,
    QuillModule.forRoot(),
...

Btw, this is how documentation tells us to do it.

🌐
GitHub
github.com › surmon-china › ngx-quill-editor
GitHub - surmon-china/ngx-quill-editor: 🍡@quilljs editor component for @angular
March 11, 2020 - <!-- use with ngModel --> <quill-editor [(ngModel)]="editorContent" [options]="editorOptions" (blur)="onEditorBlured($event)" (focus)="onEditorFocused($event)" (ready)="onEditorCreated($event)" (change)="onContentChanged($event)" ></quill-editor> <!-- or use with formControl --> <quill-editor class="form-control" [formControl]="editorContent" [options]="editorOptions" (blur)="onEditorBlured($event)" (focus)="onEditorFocused($event)" (ready)="onEditorCreated($event)" (change)="onContentChanged($event)" ></quill-editor> import { Component } from '@angular/core'; @Component({ selector: 'sample', template: require('./sample.html') }) export class Sample { public editor; public editorContent = `<h3>I am Example content</h3>`; public editorOptions = { placeholder: "insert content..."
Starred by 231 users
Forked by 54 users
Languages   TypeScript 98.4% | CSS 1.6% | TypeScript 98.4% | CSS 1.6%
🌐
GitHub
github.com › gjlaubenstein › ngx-quill
GitHub - gjlaubenstein/ngx-quill: quill editor with angular and TS
ngx-quill Examples Installation For standard webpack and tsc builds For SystemJS builds (Config) Config Outputs · Angular (>=2) component for rich text editor Quill
Author   gjlaubenstein
🌐
Dimpu
dimpu.github.io › ngx-quill
NgxQuillDemo
Build with Angular(ngx). 1000+ npm downloads.
🌐
Medium
mehul-kothari.medium.com › medium-like-text-editor-in-angular-quill-editor-38c0011a880b
Medium Like Text Editor in Angular (Quill Editor ) | by Mehul Kothari | Medium
February 24, 2021 - Medium Like Text Editor in Angular (Quill Editor ) Demo Link: https://mehulk05.github.io/Blog-Book/#/create-post Documentation: https://www.npmjs.com/package/ngx-quill Rich text editors or What You …
🌐
GitHub
github.com › KillerCodeMonkey › ngx-quill › releases
Releases · KillerCodeMonkey/ngx-quill
December 3, 2025 - Angular (>=2) components for the Quill Rich Text Editor - Releases · KillerCodeMonkey/ngx-quill
Author   KillerCodeMonkey
🌐
Snyk
snyk.io › advisor › ngx-quill › ngx-quill code examples
Top 5 ngx-quill Code Examples | Snyk
Uintra / Uintra / src / Uintra20 / Content / src / app / feature / reusable / inputs / rich-text-editor / rich-text-editor.module.ts View on Github · import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RichTextEditorComponent } from './rich-text-editor.component'; import { QuillModule, QUILL_CONFIG_TOKEN, QuillConfig } from 'ngx-quill'; import { FormsModule } from '@angular/forms'; import { RichTextEditorEmojiComponent } from './rich-text-editor-emoji/rich-text-editor-emoji.component'; import { ClickOutsideModule } from 'src/
🌐
GitHub
github.com › changhuixu › angular-quill-editor
GitHub - changhuixu/angular-quill-editor: A light weight Angular wrapper of Quilljs, powerful rich text editor · GitHub
A light weight Angular wrapper of Quilljs, powerful rich text editor - changhuixu/angular-quill-editor
Starred by 20 users
Forked by 7 users
Languages   TypeScript 74.8% | HTML 16.3% | CSS 8.9%