ng2-quill-editor

Ng2-Quill-Editor

Quill editor for Angular2.

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

Example

Demo Page

Installation

npm install ng2-quill-editor --save

npm install --save-dev @types/quill

Sample

Include QuillEditorModule in your main module:

import { QuillEditorModule } from 'ng2-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/

Author Blog

Surmon