Angular (>=2) component for rich text editor Quill
ngx-quill is the new angular (>=2) implementation of ngQuill.
npm install ngx-quill
- for projects using Angular < v5.0.0 install
npm install [email protected]
- include theme stylings: bubble.css, snow.css of quilljs in your index.html
- import
QuillModule
fromngx-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!
- 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
- 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
- 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 valdiation for maxlength - set model state to
invalid
and addng-invalid
class - minLength - add valdiation for minlength - set model state to
invalid
and addng-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 (see example in demo.html) --> 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>
- onEditorCreated - editor instance
editor
- onContentChanged - text is updated
{
editor: editorInstance,
html: html,
text: text,
delta: delta,
oldDelta: oldDelta,
source: source
}
- onSelectionChanged - selection is updated
{
editor: editorInstance,
range: range,
oldRange: oldRange,
source: source
}