ngx-quill

What is ngx-quill?

ngx-quill is an Angular component for the Quill rich text editor. It provides a simple way to integrate Quill into Angular applications, allowing for rich text editing capabilities with a variety of customization options.

What are ngx-quill's main functionalities?

Basic Integration

This code demonstrates how to integrate the Quill editor into an Angular component using ngx-quill. The editor's content is bound to the `editorContent` variable using Angular's two-way data binding.

<quill-editor [(ngModel)]="editorContent"></quill-editor>

Custom Toolbar

This code shows how to customize the toolbar of the Quill editor. The toolbar is configured to include buttons for bold, italic, and list formatting options.

<quill-editor [modules]="{ toolbar: [['bold', 'italic'], [{ 'list': 'ordered'}, { 'list': 'bullet' }]] }"></quill-editor>

Form Integration

This example demonstrates how to integrate the Quill editor with Angular forms. The editor is bound to a form control named `editor` within a reactive form.

<form [formGroup]="form"><quill-editor formControlName="editor"></quill-editor></form>

Content Formatting

This code shows how to apply custom styles and enable syntax highlighting in the Quill editor. The editor's height is set to 200 pixels, and syntax highlighting is enabled.

<quill-editor [styles]="{ height: '200px' }" [modules]="{ syntax: true }"></quill-editor>

Other packages similar to ngx-quill

ngx-editor

ngx-editor is another Angular rich text editor that provides similar functionalities to ngx-quill. It offers a simple API for integrating a rich text editor into Angular applications, with support for custom toolbars and form integration. Compared to ngx-quill, ngx-editor is more lightweight but may have fewer customization options.

angular-editor

angular-editor is a lightweight Angular WYSIWYG editor that provides basic rich text editing capabilities. It is easy to integrate and use, making it a good choice for simple use cases. However, it may lack some of the advanced features and customization options available in ngx-quill.

ng2-quill-editor

ng2-quill-editor is another Angular wrapper for the Quill editor. It offers similar functionalities to ngx-quill, including support for custom toolbars and form integration. The main difference is in the implementation and API design, which may vary slightly between the two packages.

README

ngx-quill

Angular (>=2) component for rich text editor Quill

• angular v4 - ngx-quill <=1.6.0
• angular v5 - ngx-quill > 1.6.0
• angular v6 - ngx-quill >= 3.0.0
• angular v7 - ngx-quill >= 4.0.0

ngx-quill is the new angular (>=2) implementation of ngQuill.

Examples

• demo-page
• example-repo
• angular-cli-example-repo
• ionic-v3-example-repo

Installation

• npm install ngx-quill
• for projects using Angular < v5.0.0 install npm install ngx-quill@1.6.0
• install @angular/core, @angular/forms, quill and rxjs - peer dependencies of ngx-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.

For standard webpack and tsc builds

• import QuillModule from ngx-quill:

import { QuillModule } from 'ngx-quill'

• add QuillModule to the imports of your NgModule:

@NgModule({
  imports: [
    ...,

    QuillModule
  ],
  ...
})
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 SystemJS builds (Config)

• add quill and ngx-quill to your paths:

paths: {
  ...
  'ngx-quill': 'node_modules/ngx-quill/bundles/ngx-quill.umd.js',
  'quill': 'node_modules/quill/dist/quill.js'
}

• set format and dependencies in packages:

packages: {
  'ngx-quill': {
    format: 'cjs',
    meta: {
      deps: ['quill']
    }
  },
  'quill': {
    format: 'cjs'
  }
}

• follow the steps of For standard webpack and tsc builds
• for builds with angular-cli >=6 only add quilljs to your scripts!

Config

• ngModel - set initial value or allow two-way databinding
• 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

{
  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
• style - set a style object, e.g. [style]="{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
• required - add validation as a required field - [required]="true" - default: false, boolean expected (no strings!)
• strict - default: true, sets editor in strict mode
• scrollingContainer - default '.ql-editor', allows to set scrolling container
• use custom-options for adding for example custom font sizes --> this overwrites this options globally !!!
• possbility to create a custom toolbar via projection slot [quill-editor-toolbar]:

<quill-editor>
  <div quill-editor-toolbar>
    <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>
  </div>
</quill-editor>

Outputs

• onEditorCreated - editor instance

editor

• onContentChanged - text is updated

{
  editor: editorInstance,
  html: html,
  text: text,
  content: content,
  delta: delta,
  oldDelta: oldDelta,
  source: source
}

• onSelectionChanged - selection is updated

{
  editor: editorInstance,
  range: range,
  oldRange: oldRange,
  source: source
}