ngx-quill

To extend the editor's functionality:

• Use customOptions to add custom font sizes or other specific Quill options/formats.
• Use customModules to add or overwrite modules (e.g., image-resize or your own custom modules).

When working with HTML strings as model values (e.g., via ngModel or formControl), you should manage XSS risks using the sanitize input parameter available on ngx-quill components.

Caution: The sanitize option is deactivated by default to prevent the accidental stripping of expected content or styling. However, it is highly recommended to activate this option if you are handling untrusted HTML strings to ensure security via Angular's client-side sanitization.

To install ngx-quill, run the following command:

npm install ngx-quill

Peer Dependencies

Ensure you have the following installed:

• @angular/core, @angular/common, @angular/forms, @angular/platform-browser
• quill version ^2.0.0
• rxjs

Theme Styling

You must include Quill theme CSS in your project. You can add them to your index.html, include them in your CSS/SCSS files via @import, or add them to your build process.

Available themes are bubble.css or snow.css (found in node_modules/quill/dist).

Example using SCSS imports:

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

For standard webpack, angular-cli, and tsc builds, import QuillModule and call .forRoot() in your module's imports array.

Note for Lazy Loading: If you use lazy-loaded modules, you must add QuillModule.forRoot() to your root module to ensure the Config services are correctly registered.

Note for Angular CLI >= 6: If you need quill to be available globally, add quill to the scripts section of your angular.json.

import { QuillModule } from 'ngx-quill'

@NgModule({
  imports: [
    ...,

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

You can set custom default modules and Quill configuration options globally using QuillConfigModule or the provideQuillConfig function. This approach is useful because it avoids importing the entire ngx-quill library into your vendor bundle.

Using QuillConfigModule (NgModule approach)

Use QuillConfigModule.forRoot() in your @NgModule imports.

Using provideQuillConfig (Standalone approach)

If bootstrapping an Angular application using standalone features, use provideQuillConfig in the providers array of bootstrapApplication.

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

@NgModule({
  imports: [
    ...,

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

By default, QuillJS logs a warning when Quill.register is called to overwrite an existing module. This is expected when using customOptions or customModules in ngx-quill, or in environments like Angular Universal where the module might execute on both server and browser.

To suppress these warnings, set suppressGlobalRegisterWarning: true in your configuration.

To add custom Quill modules, use the customModules array within your QuillConfig. Each entry must be a CustomModule object containing a path and an implementation.

The implementation can be the module constructor itself or an Observable that resolves to the constructor, allowing for lazy loading.

Example: Synchronous implementation

customModules = [
  { path: 'modules/blotFormatter', implementation: BlotFormatter }
];

Example: Lazy-loaded implementation

import { defer, from } from 'rxjs';

const BlotFormatter$ = defer(() => import('quill-blot-formatter').then(m => m.default));

customModules = [
  { path: 'modules/blotFormatter', implementation: BlotFormatter$ }
];

export interface CustomModule {
  implementation: any
  path: string
}

You can control where the toolbar appears relative to the editor using the customToolbarPosition input. The component uses content projection to allow you to place the toolbar in different slots.

• top: The toolbar is rendered above the editor.
• bottom: The toolbar is rendered below the editor.

Use the following selectors for content projection:

• [above-quill-editor-toolbar]: Content placed above the editor.
• [quill-editor-toolbar]: The main toolbar container.
• [below-quill-editor-toolbar]: Content placed below the editor.

For standalone Angular applications, use the provideQuillConfig provider function during bootstrapping.

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

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