Angular Quill

The Angular Quill is a powerful rich text editor built for compatibility and extensibility.
Keep reading our Angular Quill examples and learn how to use this plugin.

Usage

CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

import Quill from 'quill';

Initialization

JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

Add data-toggle="quill" on any <div> tag in order to activate the sorting functionality.

Example

<div id="quill" data-toggle="quill"></div>

<!-- Typescript -->

import { Component, OnInit } from '@angular/core';
import Quill from 'quill';

export class YOUR_COMPONENT implements OnInit {
  constructor() { }
  ngOnInit() {
    var quill = new Quill('#quill',{
			modules: {
				toolbar: [
					['bold', 'italic'],
					['link', 'blockquote', 'code', 'image'],
					[{
						'list': 'ordered'
					}, {
						'list': 'bullet'
					}]
				]
			},
			placeholder: 'Quill WYSIWYG',
			theme: 'snow'
		});
  }
}