Ngx-Quill-Editor
Quill editor for AngularX.
基于Quill、适用于Angularx的富文本编辑器。
Example
Installation
npm install ngx-quill-editor --saveSample
Include QuillEditorModule in your main module:
import { QuillEditorModule } from 'ngx-quill-editor'; @NgModule({ // ... imports: [ QuillEditorModule ], // ... }) export class AppModule {}Then use it in your component:
<!-- use with ngModel --> <quill-editor [(ngModel)]="editorContent" [options]="editorOptions" (blur)="onEditorBlured($event)" (focus)="onEditorFocused($event)" (ready)="onEditorCreated($event)" (change)="onContentChanged($event)"></quill-editor> <!-- or use with formControl --> <quill-editor class="form-control" [formControl]="editorContent" [options]="editorOptions" (blur)="onEditorBlured($event)" (focus)="onEditorFocused($event)" (ready)="onEditorCreated($event)" (change)="onContentChanged($event)"></quill-editor>import { Component } from '@angular/core'; @Component({ selector: 'sample', template: require('./sample.html') }) export class Sample { public editor; public editorContent = `<h3>I am Example content</h3>`; public editorOptions = { placeholder: "insert content..." }; constructor() {} onEditorBlured(quill) { console.log('editor blur!', quill); } onEditorFocused(quill) { console.log('editor focus!', quill); } onEditorCreated(quill) { this.editor = quill; console.log('quill is ready! this is current quill instance object', quill); } onContentChanged({ quill, html, text }) { console.log('quill content is changed!', quill, html, text); } ngOnInit() { setTimeout(() => { this.editorContent = '<h1>content changed!</h1>'; console.log('you can use the quill instance object to do something', this.editor); // this.editor.disable(); }, 2800) } }Configuration
- options : The configuration object for quill see https://quilljs.com/docs/quickstart/
