Home

Awesome

THIS PROJECT IS DEPRECATED

❌ Component is not maintained anymore.

✅ Please consider using ngx-quill.

GitHub issues GitHub forks GitHub stars GitHub license No Maintenance Intended

ngx-quill-editor

Quill editor for AngularX.

基于 Quill、适用于 AngularX 的富文本编辑器。

Example

Demo Page

Installation

npm install ngx-quill-editor --save

Sample

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