ngx-quill

ngx-quill is an angular (>=2) module for the Quill Rich Text Editor containing all components you need.

Donate/Support

If you like my work, feel free to support it. Donations to the project are always welcomed :)

PayPal: PayPal.Me/bengtler

Compatibility to Angular Versions

Examples

• Advanced Demo
• custom word count module
• custom toolbar with custom fonts and formats, toolbar position
• show the differences between sanitizing and not sanitizing your content if your content format is html
• usage of different content formats
• template-driven and reactive forms
• signal forms with custom formField
• code + syntax highlighting
• formulas
• image resizing
• custom key-bindings, e.g. shift + b for bold
• dynamic styles and placeholder
• toggle readonly
• bubble toolbar
• activate formats after editor initialisation, e.g. rtl direction
• present quilljs content with the quill-view and quill-view-html component
• Ionic Demo
• Angular Universal

Installation

• npm install ngx-quill
• install @angular/core, @angular/common, @angular/forms, @angular/platform-browser, quill version ^2.0.0 and rxjs - peer dependencies of ngx-quill
• include theme styling: bubble.css or snow.css of quilljs in your index.html (you can find them in node_modules/quill/dist), or add them in your css/scss files with @import statements, or add them external stylings in your build process.
• Example at the beginning of your style.(s)css:

@import '~quill/dist/quill.bubble.css';
// or
@import '~quill/dist/quill.snow.css';

For standard webpack, angular-cli and tsc builds

• import QuillModule from ngx-quill:

import { QuillModule } from 'ngx-quill'

• add QuillModule to the imports of your NgModule:

@NgModule({
  imports: [
    ...,

    QuillModule.forRoot()
  ],
  ...
})
class YourModule { ... }

• use <quill-editor></quill-editor> in your templates to add a default quill editor
• do not forget to include quill + theme css in your buildprocess, module or index.html!
• for builds with angular-cli >=6 only add quilljs to your scripts or scripts section of angular.json, if you need it as a global :)!

HINT: If you are using lazy loading modules, you have to add QuillModule.forRoot() to your imports in your root module to make sure the Config services is registered.

Global Config

It's possible to set custom default modules and Quill config options with the import of the QuillConfigModule from the ngx-quill/config. This module provides a global config, but eliminates the need to import the ngx-quill library into the vendor bundle:

import { QuillConfigModule } from 'ngx-quill/config';

@NgModule({
  imports: [
    ...,

    QuillConfigModule.forRoot({
      modules: {
        syntax: true,
        toolbar: [...]
      }
    })
  ],
  ...
})
class AppModule {}

Registering the global configuration can be also done using the standalone function if you are bootstrapping an Angular application using standalone features:

import { provideQuillConfig } from 'ngx-quill/config';

bootstrapApplication(AppComponent, {
  providers: [
    provideQuillConfig({
      modules: {
        syntax: true,
        toolbar: [...]
      }
    })
  ]
})

If you want to use the syntax module follow the Syntax Highlight Module Guide.

See Quill Configuration for a full list of config options.

The QuillModule exports the defaultModules if you want to extend them :).

Known issues

• IME/special characters can add some unwanted new line (https://github.com/KillerCodeMonkey/ngx-quill/issues/1821#issuecomment-2019331522) - possible solution: unpatch the compositionend event from zone.js (https://angular.io/guide/zone#setting-up-zonejs)
• formControl/model change is triggered on first rendering by quill (https://github.com/KillerCodeMonkey/ngx-quill/issues/1547), because validation can only be done after quill editor is initialise - possible solution: /

[!IMPORTANT] Currently there are many issues with HTML + Quill v2 (https://github.com/slab/quill/issues?q=is%3Aissue%20state%3Aopen%20getSemanticHtml especially https://github.com/slab/quill/issues/4509)

[!TIP] using html format is general not the best practise, use the "Delta"-represenation as object/json to be able to correclty render it and be able to migrate to different editors or major quill version

Custom Modules and options/formats

• use customOptions for adding for example custom font sizes or other options/formats
• use customModules for adding and overwriting modules, e.g. image-resize or your own modules

Suppress global register warnings

Per default when Quill.register is called and you are overwriting an already existing module, QuillJS logs a warning. If you pass customOptions or customModules ngx-quill is registering those modules/options/formats for you.

In e.g. an angular univeral project your AppModule and so QuillModule.forRoot() is executed twice (1x server side, 1x browser). QuillJS is running in a mocked env on server side, so it is intendet that every register runs twice.

To subpress those expected warnings you can turn them off by passing suppressGlobalRegisterWarning: true.

QuillEditorComponent

Hint

Ngx-quill updates the ngModel or formControl for every user change in the editor. Checkout the QuillJS Source parameter of the text-change event.

If you are using the editor reference to directly manipulate the editor content and want to update the model, pass 'user' as the source parameter to the QuillJS api methods.

Config

• ngModel - set initial value or allow two-way databinding for template driven forms
• formControl/formControlName - set initial value or allow two-way databinding for reactive forms
• readOnly (true | false) if user can edit content
• formats - array of allowed formats/groupings
• format - model format - default: html, values: html | object | text | json, sets the model value type - html = html string, object = quill operation object, json = quill operation json, text = plain text
• modules - configure/disable quill modules, e.g toolbar or add custom toolbar via html element default is

const modules = {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean'],                                         // remove formatting button

    ['link', 'image', 'video']                         // link and image, video
  ]
};

• theme - bubble/snow, default is snow
• sanitize - uses angulars DomSanitizer to sanitize html values - default: false, boolean (only for format="html")
• styles - set a styles object, e.g. [styles]="{height: '250px'}"
• placeholder - placeholder text, default is Insert text here ...
• bounds - boundary of the editor, default document.body, pass 'self' to attach the editor element
• maxLength - add validation for maxlength - set model state to invalid and add ng-invalid class
• minLength - add validation for minlength - set model state to invalid and add ng-invalid class, only set invalid if editor text not empty --> if you want to check if text is required --> use the required attribute
• trimOnValidation - trim trailing|leading newlines on validation run for required, min- and maxLength, default false
• required - add validation as a required field - [required]="true" - default: false, boolean expected (no strings!)
• registry - custom parchment registry to not change things globally
• compareValues - compare values in object format to avoid endless loops when setting ngModel value explicit, default false
• onlyFormatEventData - flag if onContentEditorChanged/onEditorChanged only sets format fitting the editor format, default false, possible values true | false | 'none'. Boosts performance when non html format is used (by avoiding expensive calls to quill.getSemanticHtml()). none skips all extra format data, so the event only returns the delta and oldDelta.
• beforeRender - a function, which is executed before the Quill editor is rendered, this might be useful for lazy-loading CSS. Given the following example:

// typings.d.ts
declare module '!!raw-loader!*.css' {
  const css: string;
  export default css;
}

// my.component.ts
const quillCSS$ = defer(() =>
  import('!!raw-loader!quill/dist/quill.core.css').then((m) => {
    const style = document.createElement('style');
    style.innerHTML = m.default;
    document.head.appendChild(style);
  })
).pipe(shareReplay({ bufferSize: 1, refCount: true }));

@Component({
  template: '<quill-editor [beforeRender]="beforeRender"></quill-editor>',
})
export class MyComponent {
  beforeRender = () => firstValueFrom(quillCSS$);
}

• use customOptions for adding for example custom font sizes - array of objects { import: string; whitelist: any[] } --> this overwrites this options globally !!!

// Example with registering custom fonts
customOptions: [{
  import: 'formats/font',
  whitelist: ['mirza', 'roboto', 'aref', 'serif', 'sansserif', 'monospace']
}]

• use customModules for adding and overwriting modules - an array of objects { implementation: any; path: string } --> this overwrites this modules globally !!!

// The `implementation` may be a custom module constructor or an Observable that resolves to
// a custom module constructor (in case you'd want to load your custom module lazily).
// For instance, these options are applicable:
// import BlotFormatter from 'quill-blot-formatter';
customModules = [
  { path: 'modules/blotFormatter', implementation: BlotFormatter }
]
// Or:
const BlotFormatter$ = defer(() => import('quill-blot-formatter').then(m => m.default))
customModules = [
  { path: 'modules/blotFormatter', implementation: BlotFormatter$ }
]

• checkout the demo repo about usage of customOptions and customModules Demo Repo
• possibility to create a custom toolbar via projection slot [quill-editor-toolbar] and add content above [above-quill-editor-toolbar] and below [below-quill-editor-toolbar] the toolbar:

Try to not use much angular magic here, like (output) listeners. Use native EventListeners

<quill-editor>



    above






    <span class="ql-formats">
      <button class="ql-bold" [title]="'Bold'"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-align" [title]="'Aligment'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      <select class="ql-align" [title]="'Aligment2'">
        <option selected></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
    </span>






    below



</quill-editor>

• customToolbarPosition - if you are working with a custom toolbar you can switch the position :). - default: top, possible values top, bottom
• debug - set log level warn, error, log or false to deactivate logging, default: warn
• trackChanges - check if only user (quill source user) or all content/selection changes should be trigger model update, default user. Using all is not recommended, it cause some unexpected sideeffects.
• classes - a space separated list of CSS classes that will be added onto the editor element
• linkPlaceholder - optional - set placeholder for the link tooltip
• debounceTime - optional - debounces onContentChanged, onEditorChanged, ngModel and form control value changes. Improves performance (especially when working with large, >2-3 MiB Deltas), as neither editorChangeHandler, nor textChangeHandler handler runs internally.
• defaultEmptyValue - optional - change the default value for an empty editor. Currently it