Package Exports

ngx-quill
ngx-quill/src/quill-editor.component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-quill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-quill

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

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

Examples

demo-page

Installation

install QuillJS 1.1.9 npm install ngx-quill
include bubble.css, snow.css in your index.html
add QuillModule to your own NgModule: ngx-quill
use <quill-editor></quill-editor> in your templates to add a default quill editor

Config

ngModel - set initial value or allow two-way databinding
readOnly (true | false) if user can edit content
formats - array of allowed formats/groupings
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
placeholder - placeholder text, default is Insert text here ...

Outputs

onEditorCreated - editor instance
onContentChanged - text is updated

{
  editor: this.quillEditor,
  html: html,
  text: text
}