update

README.md

@@ -8,7 +8,10 @@
 
 
 # Ng2-Quill-Editor
-Quill editor for Angular2，基于Quill、适用于Angular2的富文本编辑器。
+Quill editor for Angular2.
+
+基于Quill、适用于Angular2的富文本编辑器。
+
 
 # Example
 [Demo Page](https://surmon-china.github.io/ng2-quill-editor/)
@@ -26,10 +29,9 @@ npm install --save-dev @types/quill
 
 
 ### Sample
-First of all, include script `node_modules/quill/dist/quill.js` that `ng2-quill-editor` dependented in proper way;
 
-Next Include QuillEditorModule in your main module :
-``` javascript
+Include QuillEditorModule in your main module:
+``` typescript
 import { QuillEditorModule } from 'ng2-quill-editor';
 
 @NgModule({
@@ -42,20 +44,24 @@ import { QuillEditorModule } from 'ng2-quill-editor';
 export class AppModule {}
 ```
 
-Then use it in your component :
+Then use it in your component:
 
 ``` html
 <!-- use with ngModel -->
 <quill-editor [(ngModel)]="editorContent"
-              [config]="editorConfig"
+              [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"
-              [config]="editorConfig"
+              [options]="editorOptions"
+              (blur)="onEditorBlured($event)"
+              (focus)="onEditorFocused($event)"
               (ready)="onEditorCreated($event)"
               (change)="onContentChanged($event)"></quill-editor>
 ```
@@ -67,25 +73,47 @@ import { Component } from '@angular/core';
   selector: 'sample',
   template: require('./sample.html')
 })
-export class Sample{
-  public editorContent = `<p>My HTML</p>`;
-  public editorConfig = {
-    placeholder: "输入公告内容，支持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) {
-    console.log('this is quill object', quill);
+    this.editor = quill;
+    console.log('quill is ready! this is current quill instance object', quill);
   }
+
   onContentChanged({ quill, html, text }) {
-    console.log(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
-- config : The configuration object for quill see https://quilljs.com/docs/quickstart/
+- options : The configuration object for quill see https://quilljs.com/docs/quickstart/
 
 
 # Author Blog
-[Surmon](http://surmon.me)
+[Surmon](https://surmon.me)

examples/01-example.component.ts

@@ -1,35 +1,49 @@
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'quill-example-01',
-  template: `<quill-editor [(ngModel)]="editorContent"
-                           [config]="editorConfig"
-                           (ready)="onEditorCreated($event)">
-                           (change)="onContentChanged($event)">
-            </quill-editor>
-            <br>
-            <div class="ql-editor" [innerHTML]="editorContent"></div>`
+  styles: [`.form-control .quill-editor{overflow: visible;} .form-group { border: 1px solid #ccc; position: relative; } .has-error { border-color: red; } .has-success { border-color: green; }`],
+  template: `<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form">
+              <div class="form-group" [ngClass]="{'has-error': (!content.valid && content.touched), 'has-success': (content.valid && content.touched)}">
+                <quill-editor class="form-control" [formControl]="content" [options]="editorConfig"></quill-editor>
+              </div>
+            </form>`,
+  encapsulation: ViewEncapsulation.None
 })
 export class QuillEditorComponentExample01 {
 
-  public editorContent = `<p>I am Example 01</p>`;
+  public form:FormGroup;
+  public content:AbstractControl;
+
   public editorConfig = {
-    placeholder: "输入公告内容，支持html"
+    theme: 'bubble',
+    placeholder: "输入任何内容，支持html",
+    modules: {
+      toolbar: [
+        ['bold', 'italic', 'underline', 'strike'],
+        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+        [{ 'color': [] }, { 'background': [] }],
+        [{ 'font': [] }],
+        [{ 'align': [] }],
+        ['link', 'image'],
+        ['clean']
+      ]
+    }
   };
 
-  constructor() {}
-
-  onEditorCreated(quill) {
-    console.log('this is quill object', quill);
-  }
+  constructor(private _fb:FormBuilder) {
+    this.form = _fb.group({
+      'content': ['<p>I am Example 01</p>', Validators.compose([Validators.required])],
+    });
 
-  onContentChanged({ quill, html, text }) {
-    console.log(quill, html, text);
-  }
+    this.content = this.form.controls['content'];
+  };
 
-  ngOnInit() {
-    setTimeout(() => {
-      this.editorContent = '<h1>i am changed!</h1>'
-    }, 1800)
+  public submitAnnouncement(values:Object):void {
+    if (this.form.valid) {
+       console.log('Submit!', values);
+    }
   }
 }

examples/02-example.component.ts

@@ -1,48 +1,65 @@
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'quill-example-02',
-  styles: [`.form-group { border: 1px solid #ccc; } .has-error { border-color: red; } .has-success { border-color: green; }`],
-  template: `<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form">
-              <div class="form-group" [ngClass]="{'has-error': (!content.valid && content.touched), 'has-success': (content.valid && content.touched)}">
-                <quill-editor class="form-control" [formControl]="content" [config]="editorConfig"></quill-editor>
-              </div>
-            </form>`
+  template: `<quill-editor [(ngModel)]="editorContent"
+                           [options]="editorConfig"
+                           (blur)="onEditorBlured($event)"
+                           (focus)="onEditorFocused($event)"
+                           (ready)="onEditorCreated($event)"
+                           (change)="onContentChanged($event)">
+            </quill-editor>
+            <div class="ql-editor preview" [innerHTML]="editorContent"></div>`,
+  styles: [
+    `
+     .quill-editor {
+       min-height: 16em;
+       max-height: 20em;
+       overflow-y: auto;
+     }
+     .preview {
+       min-height: 10em;
+       max-height: 16em;
+       overflow-y: auto;
+       border: 1px solid #eee;
+       border-top: none;
+     }
+    `
+  ],
+  encapsulation: ViewEncapsulation.None
 })
 export class QuillEditorComponentExample02 {
 
-  public form:FormGroup;
-  public content:AbstractControl;
-
+  public editor;
+  public editorContent = `<h3>I am Example 02</h3>`;
   public editorConfig = {
-    theme: 'bubble',
-    placeholder: "输入任何内容，支持html",
-    modules: {
-      toolbar: [
-        ['bold', 'italic', 'underline', 'strike'],
-        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-        [{ 'color': [] }, { 'background': [] }],
-        [{ 'font': [] }],
-        [{ 'align': [] }],
-        ['link', 'image'],
-        ['clean']
-      ]
-    }
+    placeholder: "输入公告内容，支持html"
   };
 
-  constructor(private _fb:FormBuilder) {
-    this.form = _fb.group({
-      'content': ['<p>I am Example 02</p>', Validators.compose([Validators.required])],
-    });
+  constructor() {}
 
-    this.content = this.form.controls['content'];
-  };
+  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);
+  }
 
-  public submitAnnouncement(values:Object):void {
-    if (this.form.valid) {
-       console.log('Submit!', values);
-    }
+  ngOnInit() {
+    setTimeout(() => {
+      this.editorContent = '<h1>Example 02 changed!</h1>';
+      console.log('you can use the quill instance object to do something', this.editor);
+      // this.editor.disable();
+    }, 2800)
   }
 }

examples/03-example.component.ts

@@ -0,0 +1,77 @@
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'quill-example-03',
+  template: `
+            <div id="toolbar">
+              <!-- Add a bold button -->
+              <button class="ql-bold">Bold</button>
+              <button class="ql-italic">Italic</button>
+              <!-- Add font size dropdown -->
+              <select class="ql-size">
+                <option value="small"></option>
+                <!-- Note a missing, thus falsy value, is used to reset to default -->
+                <option selected></option>
+                <option value="large"></option>
+                <option value="huge"></option>
+              </select>
+              <!-- Add subscript and superscript buttons -->
+              <button class="ql-script" value="sub"></button>
+              <button class="ql-script" value="super"></button>
+              <button style="width: 120px" (click)="customButtonClick()">custom button</button>
+            </div>
+            <quill-editor  [(ngModel)]="editorContent"
+                           [options]="editorConfig"
+                           (blur)="onEditorBlured($event)"
+                           (focus)="onEditorFocused($event)"
+                           (ready)="onEditorCreated($event)"
+                           (change)="onContentChanged($event)">
+            </quill-editor>`,
+  styles: [
+    `
+     .quill-editor {
+       min-height: 16em;
+       max-height: 20em;
+       overflow-y: auto;
+     }
+    `
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class QuillEditorComponentExample03 {
+
+  public editor;
+  public editorContent = `<h3>I am Example 03</h3>`;
+  public editorConfig = {
+    placeholder: "输入公告内容，支持html",
+    modules: {
+      toolbar: '#toolbar'
+    }
+  };
+
+  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);
+  }
+
+  customButtonClick() {
+    alert(`You can custom the button and listen click event to do something...\n你可以定义一些自定义按钮做你想做的事，如上传图片至第三方存储...等等`)
+  }
+
+  ngOnInit() {
+  }
+}