Clone or download
surmon-china Merge pull request #59 from wlecki/patch-1
Updating @types/quill dependency
Latest commit 873a154 Aug 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples update Apr 19, 2017
.npmignore Update to V1.1.0 Dec 19, 2016
LICENSE Init Dec 15, 2016
README.md 🙂 Aug 8, 2017
index.ts Init Dec 15, 2016
package.json Updating @types/quill dependency Jun 28, 2018
quillEditor.component.css update Mar 20, 2017
quillEditor.component.ts Fix TS7018 and TS7006 errors for implicit any Sep 27, 2017
quillEditor.module.ts update Mar 20, 2017

README.md

GitHub issues GitHub forks GitHub stars GitHub license Twitter

NPM

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

Author Blog

Surmon