From c97d3373bf06c60e89dd551238ce1a34b6874b3e Mon Sep 17 00:00:00 2001
From: surmon-china <surmon@foxmail.com>
Date: Wed, 11 Mar 2020 05:29:03 +0800
Subject: [PATCH] Update document & remove examples

---
 .github/ISSUE_TEMPLATE.md                     |  10 +-
 README.md                                     | 148 +++++-------------
 examples/01-example.vue                       | 133 ----------------
 examples/02-example.vue                       | 122 ---------------
 examples/03-example.vue                       | 143 -----------------
 examples/04-example.vue                       | 134 ----------------
 examples/index.js                             |  11 --
 .../nuxt-ssr-example/nuxt-quill-plugin.js     |   5 -
 .../nuxt-ssr-example/nuxt-ssr-example.vue     |  66 --------
 examples/nuxt-ssr-example/nuxt.config.js      |  13 --
 10 files changed, 47 insertions(+), 738 deletions(-)
 delete mode 100644 examples/01-example.vue
 delete mode 100644 examples/02-example.vue
 delete mode 100644 examples/03-example.vue
 delete mode 100644 examples/04-example.vue
 delete mode 100644 examples/index.js
 delete mode 100644 examples/nuxt-ssr-example/nuxt-quill-plugin.js
 delete mode 100644 examples/nuxt-ssr-example/nuxt-ssr-example.vue
 delete mode 100644 examples/nuxt-ssr-example/nuxt.config.js

diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 605cd83..56930bf 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,11 +1,9 @@
 
 ### 中文用户注意：
-
-1. 尽量用英文描述你的 issue
+1. 尽量用英文描述你的 Issue，你的问题是面向世界的
 2. 不要把内容堆彻在标题上，逻辑清晰地写在内容区
 3. 贴代码要提前格式化好，有颜色高亮那种，贴文本，不要贴图片
-4. 提问题前，必须仔细阅读 REMADE.md + 在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决
-5. **如果无法做到提一个合格、优秀的问题，则问题会被 close + block**
+4. 提问题前，务必仔细阅读 REMADE.md；在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决
 
 ### BUG REPORT TEMPLATE
 
@@ -17,6 +15,6 @@
 
 #### Steps to reproduce
 
-#### What is Expected?		
+#### What is Expected?
 
-#### What is actually happening?
\ No newline at end of file
+#### What is actually happening?
diff --git a/README.md b/README.md
index fcc5720..102e2c7 100644
--- a/README.md
+++ b/README.md
@@ -4,34 +4,33 @@
 [![GitHub forks](https://img.shields.io/github/forks/surmon-china/vue-quill-editor.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor/network)
 [![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/surmon-china/vue-quill-editor)
-[![Twitter](https://img.shields.io/twitter/url/https/github.com/surmon-china/vue-quill-editor.svg?style=flat-square)](https://twitter.com/intent/tweet?url=https://github.com/surmon-china/vue-quill-editor)
-[![](https://badge.juejin.im/entry/5852b6fc61ff4b006c89b49d/likes.svg?style=flat-square)](https://juejin.im/entry/5852b6fc61ff4b006c89b49d/detail)
 
 [![NPM](https://nodei.co/npm/vue-quill-editor.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-quill-editor/)
 [![NPM](https://nodei.co/npm-dl/vue-quill-editor.png?months=9&height=3)](https://nodei.co/npm/vue-quill-editor/)
 
 
 # Vue-Quill-Editor
-🍡Quill editor component for Vue, support SPA and SSR.
 
-基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
+🍡[Quill](https://github.com/quilljs/quill) editor component for Vue.
 
+基于 [Quill](https://github.com/quilljs/quill)、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
 
-## Example
 
-[Demo Page](https://surmon-china.github.io/vue-quill-editor/)
+### Example
 
-[CDN Example](https://jsfiddle.net/tng9r8j3/)
+- [Component example page](https://surmon-china.github.io/vue-quill-editor/)
+- [CDN example page](https://jsfiddle.net/tng9r8j3/)
 
-[Nuxt.js/SSR example code](https://github.com/surmon-china/vue-quill-editor/blob/master/examples/nuxt-ssr-example)
 
-#### Projects Using Vue-Quill-Editor
-[Tamiat CMS](https://github.com/tamiat/tamiat/)
+### Install
 
+**NPM**
 
-## Install
+``` bash
+npm install vue-quill-editor --save
+```
 
-#### CDN
+**CDN**
 
 ``` html
 <link rel="stylesheet" href="path/to/quill.core.css"/>
@@ -45,15 +44,9 @@
 </script>
 ```
 
-#### NPM
-
-``` bash
-npm install vue-quill-editor --save
-```
-
 ### Mount
 
-#### mount with global
+#### Mount with global
 
 ``` javascript
 import Vue from 'vue'
@@ -67,7 +60,7 @@ import 'quill/dist/quill.bubble.css'
 Vue.use(VueQuillEditor, /* { default global options } */)
 ```
 
-#### mount with component
+#### Mount with local component
 
 ```javascript
 // require styles
@@ -84,97 +77,44 @@ export default {
 }
 ```
 
-#### mount with ssr
+#### Mount with SSR
 
-```javascript
-// if used in nuxt.js/ssr, you should keep require it only in browser build environment
-if (process.browser) {
-  const VueQuillEditor = require('vue-quill-editor/dist/ssr')
-  Vue.use(VueQuillEditor, /* { default global options } */)
-}
-```
+View [Nuxt.js example code](https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-quill-editor/nuxt).
 
-#### register quill module
+### Register Quill module
 
 ```javascript
-// register quill modules, you need to introduce and register before the vue program is instantiated
 import Quill from 'quill'
 import yourQuillModule from '../yourModulePath/yourQuillModule.js'
 Quill.register('modules/yourQuillModule', yourQuillModule)
-```
-
-### Difference（使用方法的区别）
-
-**SSR and the only difference in the use of the SPA:**
-- SPA worked by the `component`, find quill instance by `ref attribute`.
-- SSR worked by the `directive`, find quill instance by `directive arg`.
-- Other configurations, events are the same.
-
-### SSR
-
-``` vue
-<!-- You can custom the "myQuillEditor" name used to find the quill instance in current component -->
-<template>
-  <!-- bidirectional data binding（双向数据绑定） -->
-  <div class="quill-editor" 
-       v-model="content"
-       v-quill:myQuillEditor="editorOption">
-  </div>
-
-  <!-- Or manually control the data synchronization（手动控制数据流）  -->
-  <div class="quill-editor" 
-       :content="content"
-       @change="onEditorChange($event)"
-       v-quill:myQuillEditor="editorOption">
-  </div>
-</template>
 
-<script>
-  export default {
-    data() {
-      return {
-        content: '<p>example content</p>',
-        editorOption: { /* quill options */ }
-      }
-    },
-    mounted() {
-      console.log('this is current quill instance object', this.myQuillEditor)
-    },
-    methods: {
-      onEditorChange(event) {
-        console.log('onEditorChange')
-      }
-    },
-    // Omit the same parts as in the following component sample code
-    // ...
-  }
-</script>
+// Vue app...
 ```
 
-
-### SPA
+### Component
 
 ``` vue
 <template>
-  <!-- bidirectional data binding（双向数据绑定） -->
-  <quill-editor v-model="content"
-                ref="myQuillEditor"
-                :options="editorOption"
-                @blur="onEditorBlur($event)"
-                @focus="onEditorFocus($event)"
-                @ready="onEditorReady($event)">
-  </quill-editor>
-
-  <!-- Or manually control the data synchronization（或手动控制数据流） -->
-  <quill-editor :content="content"
-                :options="editorOption"
-                @change="onEditorChange($event)">
-  </quill-editor>
+  <!-- Two-way Data-Binding -->
+  <quill-editor
+    ref="myQuillEditor"
+    v-model="content"
+    :options="editorOption"
+    @blur="onEditorBlur($event)"
+    @focus="onEditorFocus($event)"
+    @ready="onEditorReady($event)"
+  />
+
+  <!-- Or manually control the data synchronization -->
+  <quill-editor
+    :content="content"
+    :options="editorOption"
+    @change="onEditorChange($event)"
+  />
 </template>
 
 <script>
-
-  // you can also register quill modules in the component
+  // You can also register Quill modules in the component
   import Quill from 'quill'
   import { someModule } from '../yourModulePath/someQuillModule.js'
   Quill.register('modules/someModule', someModule)
@@ -184,12 +124,10 @@ Quill.register('modules/yourQuillModule', yourQuillModule)
       return {
         content: '<h2>I am Example</h2>',
         editorOption: {
-          // some quill options
+          // Some Quill options...
         }
       }
     },
-    // manually control the data synchronization
-    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
     methods: {
       onEditorBlur(quill) {
         console.log('editor blur!', quill)
@@ -217,8 +155,11 @@ Quill.register('modules/yourQuillModule', yourQuillModule)
 </script>
 ```
 
+### Projects Using vue-quill-editor
+- [Tamiat CMS](https://github.com/tamiat/tamiat/)
+- ...
 
-## Modules
+### Modules
 - [quill-image-extend-module](https://github.com/NextBoy/quill-image-extend-module)
 - [quill-image-resize-module](https://github.com/kensnyder/quill-image-resize-module)
 - [quill-image-drop-module](https://github.com/kensnyder/quill-image-drop-module)
@@ -226,7 +167,7 @@ Quill.register('modules/yourQuillModule', yourQuillModule)
 - [more modules...](https://github.com/search?o=desc&q=quill+module&s=stars&type=Repositories&utf8=%E2%9C%93)
 
 
-## Issues
+### Issues
 - [Add attributes from toolbar options](https://github.com/quilljs/quill/issues/1084)
 - [Option to insert an image from a URL](https://github.com/quilljs/quill/issues/893)
 - [How vue-quill-editor combine with the syntax highlighter module of highlight.js](https://github.com/surmon-china/vue-quill-editor/issues/39)
@@ -234,9 +175,6 @@ Quill.register('modules/yourQuillModule', yourQuillModule)
 - [How to fix “Can’t find variable: Quill”, “Quill is undefined”, “window.Quill is undefined” errors when trying to use Quill modules that use Webpack in Nuxt/SSR](https://github.com/surmon-china/vue-quill-editor/issues/171#issuecomment-370253411)
 
 
-## Quill documents
-[Api docs](https://quilljs.com/docs/quickstart/)
-
+### Quill
+[Quill API document](https://quilljs.com/docs/quickstart/)
 
-## Author
-[Surmon](https://surmon.me)
diff --git a/examples/01-example.vue b/examples/01-example.vue
deleted file mode 100644
index 0a39cac..0000000
--- a/examples/01-example.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <md-card>
-    <md-card-actions>
-      <div class="md-subhead">
-        <span>01 Example (theme snow)</span>
-      </div>
-      <md-button target="_blank" 
-                 class="md-icon-button"
-                 href="https://github.com/surmon-china/vue-quill-editor/tree/master/examples/01-example.vue">
-        <md-icon>code</md-icon>
-      </md-button>
-    </md-card-actions>
-    <md-card-media>
-      <div class="quill-editor-example">
-        <!-- quill-editor -->
-        <quill-editor ref="myTextEditor"
-                      v-model="content"
-                      :options="editorOption"
-                      @blur="onEditorBlur($event)"
-                      @focus="onEditorFocus($event)"
-                      @ready="onEditorReady($event)">
-        </quill-editor>
-        <div class="quill-code">
-          <code class="hljs" v-html="contentCode"></code>
-        </div>
-      </div>
-    </md-card-media>
-  </md-card>
-</template>
-
-<script>
-  import hljs from 'highlight.js'
-  export default {
-    data() {
-      return {
-        name: '01-example',
-        content: `<h2 class="ql-align-center"><span class="ql-font-serif">Text content loading..</span></h2>`,
-        editorOption: {
-          modules: {
-            toolbar: [
-              ['bold', 'italic', 'underline', 'strike'],
-              ['blockquote', 'code-block'],
-              [{ 'header': 1 }, { 'header': 2 }],
-              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-              [{ 'script': 'sub' }, { 'script': 'super' }],
-              [{ 'indent': '-1' }, { 'indent': '+1' }],
-              [{ 'direction': 'rtl' }],
-              [{ 'size': ['small', false, 'large', 'huge'] }],
-              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-              [{ 'font': [] }],
-              [{ 'color': [] }, { 'background': [] }],
-              [{ 'align': [] }],
-              ['clean'],
-              ['link', 'image', 'video']
-            ],
-            syntax: {
-              highlight: text => hljs.highlightAuto(text).value
-            }
-          }
-        }
-      }
-    },
-    methods: {
-      onEditorBlur(editor) {
-        console.log('editor blur!', editor)
-      },
-      onEditorFocus(editor) {
-        console.log('editor focus!', editor)
-      },
-      onEditorReady(editor) {
-        console.log('editor ready!', editor)
-      }
-    },
-    computed: {
-      editor() {
-        return this.$refs.myTextEditor.quill
-      },
-      contentCode() {
-        return hljs.highlightAuto(this.content).value
-      }
-    },
-    mounted() {
-      console.log('this is my editor', this.editor)
-      setTimeout(() => {
-        this.content = `<h1 class="ql-align-center">
-                          <span class="ql-font-serif" style="background-color: rgb(240, 102, 102); color: rgb(255, 255, 255);"> I am Example 1! </span>
-                        </h1>
-                        <p><br></p>
-                        <p><span class="ql-font-serif">W Can a man still be brave if he's afraid? That is the only time a man can be brave. </span></p>
-                        <p><br></p>
-                        <p><strong class="ql-font-serif ql-size-large">Courage and folly is </strong><strong class="ql-font-serif ql-size-large" style="color: rgb(230, 0, 0);">always</strong><strong class="ql-font-serif ql-size-large"> just a fine line.</strong></p>
-                        <p><br></p>
-                        <p><u class="ql-font-serif">There is only one God, and his name is Death. And there is only one thing we say to Death: "Not today."</u></p>
-                        <p><br></p>
-                        <p><em class="ql-font-serif">Fear cuts deeper than swords.</em></p>
-                        <p><br></p>
-                        <pre class="ql-syntax" spellcheck="false">const a = 10;<br>const editorOption = { highlight: text => hljs.highlightAuto(text).value };</pre>
-                        <p><br></p>
-                        <p><span class="ql-font-serif">Every flight begins with a fall.</span></p>
-                        <p><br></p>
-                        <p><a href="https://surmon.me/" target="_blank" class="ql-font-serif ql-size-small" style="color: rgb(230, 0, 0);"><u>A ruler who hides behind paid executioners soon forgets what death is. </u></a></p>
-                        <p><br></p>
-                        <iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0" height="238" width="560"></iframe>
-                        <p><br></p>
-                        <p><span class="ql-font-serif">Hear my words, and bear witness to my vow. Night gathers, and now my watch begins. It shall not end until my death. I shall take no wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die at my post. I am the sword in the darkness. I am the watcher on the walls. I am the fire that burns against the cold, the light that brings the dawn, the horn that wakes the sleepers, the shield that guards the realms of men. I pledge my life and honor to the Night’s Watch, for this night and all the nights to come.</span></p>
-                        <p><br></p>
-                        <p><span class="ql-font-serif">We are born to suffer, to suffer can make us strong.</span></p>
-                        <p><br></p>
-                        <p><span class="ql-font-serif">The things we love destroy us every time.</span></p>
-                        `
-      }, 1300)
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .quill-code {
-    border: none;
-    height: auto;
-
-    > code {
-      width: 100%;
-      margin: 0;
-      padding: 1rem;
-      border: 1px solid #ccc;
-      border-top: none;
-      border-radius: 0;
-      height: 10rem;
-      overflow-y: auto;
-      resize: vertical;
-    }
-  }
-</style>
diff --git a/examples/02-example.vue b/examples/02-example.vue
deleted file mode 100644
index 4b704f9..0000000
--- a/examples/02-example.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <md-card>
-    <md-card-actions>
-      <div class="md-subhead">
-        <span>02 Example (theme bubble)</span>
-      </div>
-      <md-button target="_blank" 
-                 class="md-icon-button"
-                 href="https://github.com/surmon-china/vue-quill-editor/tree/master/examples/02-example.vue">
-        <md-icon>code</md-icon>
-      </md-button>
-    </md-card-actions>
-    <md-card-media>
-      <div class="quill-editor-example">
-        <!-- quill-editor -->
-        <quill-editor class="editor-example bubble"
-                      ref="myTextEditor"
-                      :content="content"
-                      :options="editorOption"
-                      @change="onEditorChange($event)">
-        </quill-editor>
-        <div class="quill-code">
-          <code class="hljs xml" v-html="contentCode"></code>
-        </div>
-      </div>
-    </md-card-media>
-  </md-card>
-</template>
-
-<script>
-  import hljs from 'highlight.js'
-  export default {
-    data() {
-      return {
-        name: '02-example',
-        content: `<h1 class="ql-align-center">
-                    <span class="ql-font-serif"><span class="ql-cursor"></span>I am Example 2!</span></span>
-                  </h1>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">Whenever you play the game of thrones, you either win or die. There is no middle ground.</span></p>
-                  <p><br></p>
-                  <p><strong class="ql-font-serif">Some war against sword and spear to win, and the others the crow and the paper to win.</strong></p>
-                  <p><br></p>
-                  <p><u class="ql-font-serif">Dead history is write in ink, the living sort in blood.</u></p>
-                  <p><br></p>
-                  <p><em class="ql-font-serif">They're only numbers. Numbers on paper. Once you understand that, it's easy to make them behave.</em></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">Every time we deal with an enemy, we create two more.</span></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">So the king has decreed. The small council consents.</span></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">Chaos not is a pit, chaos is a ladder.</span></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">A chain needs all sorts of metals, and a land needs all sorts of people.</span></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">When the snows fall and the white winds blow, the lone wolf dies, but the pack survives.</p>
-                  `,
-        editorOption: {
-          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']
-            ]
-          }
-        }
-      }
-    },
-    methods: {
-      onEditorChange({ editor, html, text }) {
-        // console.log('editor change!', editor, html, text)
-        this.content = html
-      }
-    },
-    computed: {
-      contentCode() {
-        return hljs.highlightAuto(this.content).value
-      },
-      editor() {
-        return this.$refs.myTextEditor.quill
-      }
-    },
-    mounted() {
-      console.log('this is my editor, example 2', this.editor)
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-
-  .quill-editor,
-  .quill-code {
-    height: 20rem;
-  }
-
-  .quill-editor {
-    border: 1px solid #ccc;
-    border-bottom: none;
-  }
-
-  .quill-code {
-    border: none;
-    height: auto;
-
-    > code {
-      width: 100%;
-      margin: 0;
-      padding: 1rem;
-      border: 1px solid #ccc;
-      border-radius: 0;
-      height: 10rem;
-      overflow-y: auto;
-    }
-  }
-</style>
diff --git a/examples/03-example.vue b/examples/03-example.vue
deleted file mode 100644
index a0869ad..0000000
--- a/examples/03-example.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <md-card>
-    <md-card-actions>
-      <div class="md-subhead">
-        <span>03 Example (custom toolbar)</span>
-      </div>
-      <md-button target="_blank" 
-                 class="md-icon-button" 
-                 href="https://github.com/surmon-china/vue-quill-editor/tree/master/examples/03-example.vue">
-        <md-icon>code</md-icon>
-      </md-button>
-    </md-card-actions>
-    <md-card-media>
-      <div class="quill-editor-example">
-        <!-- quill-editor -->
-        <quill-editor v-model="content"
-                      :options="editorOption"
-                      @blur="onEditorBlur($event)"
-                      @focus="onEditorFocus($event)"
-                      @ready="onEditorReady($event)">
-          <div id="toolbar" slot="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>
-            <select class="ql-font">
-              <option selected="selected"></option>
-              <option value="serif"></option>
-              <option value="monospace"></option>
-            </select>
-            <!-- Add subscript and superscript buttons -->
-            <button class="ql-script" value="sub"></button>
-            <button class="ql-script" value="super"></button>
-            <!-- You can also add your own -->
-            <button id="custom-button" @click="customButtonClick">[ Click me ]</button>
-          </div>
-        </quill-editor>
-        <div class="quill-code">
-          <div class="title">Code</div>
-          <code class="hljs xml" v-html="contentCode"></code>
-        </div>
-      </div>
-    </md-card-media>
-  </md-card>
-</template>
-
-<script>
-  import hljs from 'highlight.js'
-  export default {
-    data() {
-      return {
-        name: '03-example',
-        content: `<h1 class="ql-align-center">
-                    <span class="ql-font-serif"><span class="ql-cursor"></span>I am Example 3!</span></span>
-                  </h1>
-                  <p><br></p>
-                  <p><strong class="ql-font-serif">Whenever you play the game of thrones, you either win or die. There is no middle ground.</strong></p>
-                  <p><br></p>
-                  <p><u class="ql-font-serif">Some war against sword and spear to win, and the others the crow and the paper to win.</u></p>
-                  <p><br></p>
-                  <p><em class="ql-font-serif">Dead history is write in ink, the living sort in blood.</em></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif" style="color: rgb(0, 102, 204);">They're only numbers. Numbers on paper. Once you understand that, it's easy to make them behave.</span></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">Every time we deal with an enemy, we create two more.</span></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">So the king has decreed. The small council consents.</span></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">Chaos not is a pit, chaos is a ladder.</span></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">A chain needs all sorts of metals, and a land needs all sorts of people.</span></p>
-                  <p><br></p>
-                  <p><span class="ql-font-serif">When the snows fall and the white winds blow, the lone wolf dies, but the pack survives.</p>
-                  `,
-        editorOption: {
-          modules: {
-            toolbar: '#toolbar'
-          }
-        }
-      }
-    },
-    computed: {
-      contentCode() {
-        return hljs.highlightAuto(this.content).value
-      },
-    },
-    methods: {
-      onEditorBlur(editor) {
-        // console.log('editor blur!', editor)
-      },
-      onEditorFocus(editor) {
-        // console.log('editor focus!', editor)
-      },
-      onEditorReady(editor) {
-        // console.log('editor ready!', editor)
-      },
-      customButtonClick() {
-        alert(`You can custom the button and listen click event to do something...\n你可以定义一些自定义按钮做你想做的事，如上传图片至第三方存储再插入内容区...等等`)
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .quill-editor,
-  .quill-code {
-    width: 50%;
-    float: left;
-  }
-
-  .quill-code {
-    height: auto;
-    border: none;
-
-    > .title {
-      border: 1px solid #ccc;
-      border-left: none;
-      height: 3em;
-      line-height: 3em;
-      text-indent: 1rem;
-      font-weight: bold;
-    }
-
-    > code {
-      width: 100%;
-      margin: 0;
-      padding: 1rem;
-      border: 1px solid #ccc;
-      border-top: none;
-      border-left: none;
-      border-radius: 0;
-      height: 30rem;
-      overflow-y: auto;
-    }
-  }
-</style>
diff --git a/examples/04-example.vue b/examples/04-example.vue
deleted file mode 100644
index a151e5f..0000000
--- a/examples/04-example.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <md-card>
-    <md-card-actions>
-      <div class="md-subhead">
-        <span>04 Example (register modules)</span>
-      </div>
-      <md-button target="_blank" 
-                 class="md-icon-button"
-                 href="https://github.com/surmon-china/vue-quill-editor/tree/master/examples/04-example.vue">
-        <md-icon>code</md-icon>
-      </md-button>
-    </md-card-actions>
-    <md-card-media>
-      <div class="quill-editor-example">
-        <!-- quill-editor -->
-        <quill-editor v-model="content"
-                      :options="editorOption"
-                      @blur="onEditorBlur($event)"
-                      @focus="onEditorFocus($event)"
-                      @ready="onEditorReady($event)">
-        </quill-editor>
-        <div class="quill-code">
-          <div class="title">Code</div>
-          <code class="hljs xml" v-html="contentCode"></code>
-        </div>
-      </div>
-    </md-card-media>
-  </md-card>
-</template>
-
-<script>
-  import hljs from 'highlight.js'
-  import VueQuillEditor, { Quill } from 'vue-quill-editor'
-  import { ImageDrop } from 'quill-image-drop-module'
-  import ImageResize from 'quill-image-resize-module'
-  Quill.register('modules/imageDrop', ImageDrop)
-  Quill.register('modules/imageResize', ImageResize)
-  
-  export default {
-    data() {
-      return {
-        name: 'register-modules-example',
-        content: `<p><img src="/vue-quill-editor/static/images/surmon-6.jpg" width="500"></p>
-                  <br>
-                  <p><strong><em>Or drag/paste an image here.</em></strong></p>`,
-        editorOption: {
-          modules: {
-            toolbar: [
-              [{ 'size': ['small', false, 'large'] }],
-              ['bold', 'italic'],
-              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-              ['link', 'image']
-            ],
-            history: {
-              delay: 1000,
-              maxStack: 50,
-              userOnly: false
-            },
-            imageDrop: true,
-            imageResize: {
-              displayStyles: {
-                backgroundColor: 'black',
-                border: 'none',
-                color: 'white'
-              },
-              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
-            }
-          }
-        }
-      }
-    },
-    mounted() {
-      this.content = `<p><strong><em>Click on the Image Below to resize!</em></strong></p><br>` + this.content
-    },
-    computed: {
-      contentCode() {
-        return hljs.highlightAuto(this.content).value
-      },
-    },
-    methods: {
-      onEditorBlur(editor) {
-        // console.log('editor blur!', editor)
-      },
-      onEditorFocus(editor) {
-        // console.log('editor focus!', editor)
-      },
-      onEditorReady(editor) {
-        // console.log('editor ready!', editor)
-      }
-    }
-  }
-</script>
-
-<style>
-  .quill-editor:not(.bubble) .ql-container,
-  .quill-editor:not(.bubble) .ql-container .ql-editor {
-    height: 30rem;
-    padding-bottom: 1rem;
-  }
-</style>
-
-<style lang="scss" scoped>
-  .quill-editor,
-  .quill-code {
-    width: 50%;
-    float: left;
-  }
-
-  .quill-code {
-    height: auto;
-    border: none;
-
-    > .title {
-      border: 1px solid #ccc;
-      border-left: none;
-      height: 3em;
-      line-height: 3em;
-      text-indent: 1rem;
-      font-weight: bold;
-    }
-
-    > code {
-      width: 100%;
-      margin: 0;
-      padding: 1rem;
-      border: 1px solid #ccc;
-      border-top: none;
-      border-left: none;
-      border-radius: 0;
-      height: 30rem;
-      overflow-y: auto;
-    }
-  }
-</style>
diff --git a/examples/index.js b/examples/index.js
deleted file mode 100644
index b73873f..0000000
--- a/examples/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import example01 from './01-example.vue'
-import example02 from './02-example.vue'
-import example03 from './03-example.vue'
-import example04 from './04-example.vue'
-
-export default {
-  example01,
-  example02,
-  example03,
-  example04
-}
diff --git a/examples/nuxt-ssr-example/nuxt-quill-plugin.js b/examples/nuxt-ssr-example/nuxt-quill-plugin.js
deleted file mode 100644
index 08b7a2c..0000000
--- a/examples/nuxt-ssr-example/nuxt-quill-plugin.js
+++ /dev/null
@@ -1,5 +0,0 @@
-
-import Vue from 'vue'
-import VueQuillEditor from 'vue-quill-editor/dist/ssr'
-
-Vue.use(VueQuillEditor)
diff --git a/examples/nuxt-ssr-example/nuxt-ssr-example.vue b/examples/nuxt-ssr-example/nuxt-ssr-example.vue
deleted file mode 100644
index 2f2b6ac..0000000
--- a/examples/nuxt-ssr-example/nuxt-ssr-example.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <section class="container">
-    <div class="quill-editor" 
-         :content="content"
-         @change="onEditorChange($event)"
-         @blur="onEditorBlur($event)"
-         @focus="onEditorFocus($event)"
-         @ready="onEditorReady($event)"
-         v-quill:myQuillEditor="editorOption">
-    </div>
-  </section>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        content: '<p>I am Example</p>',
-        editorOption: {
-          // some quill options
-          modules: {
-            toolbar: [
-              ['bold', 'italic', 'underline', 'strike'],
-              ['blockquote', 'code-block']
-            ]
-          }
-        }
-      }
-    },
-    mounted() {
-      console.log('app init, my quill insrance object is:', this.myQuillEditor)
-      setTimeout(() => {
-        this.content = 'i am changed'
-      }, 3000)
-    },
-    methods: {
-      onEditorBlur(editor) {
-        console.log('editor blur!', editor)
-      },
-      onEditorFocus(editor) {
-        console.log('editor focus!', editor)
-      },
-      onEditorReady(editor) {
-        console.log('editor ready!', editor)
-      },
-      onEditorChange({ editor, html, text }) {
-        console.log('editor change!', editor, html, text)
-        this.content = html
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .container {
-    width: 60%;
-    margin: 0 auto;
-    padding: 50px 0;
-
-    .quill-editor {
-      min-height: 200px;
-      max-height: 400px;
-      overflow-y: auto;
-    }
-  }
-</style>
diff --git a/examples/nuxt-ssr-example/nuxt.config.js b/examples/nuxt-ssr-example/nuxt.config.js
deleted file mode 100644
index f76f27f..0000000
--- a/examples/nuxt-ssr-example/nuxt.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-module.exports = {
-  // some nuxt config...
-  plugins: [
-    { src: '~plugins/nuxt-quill-plugin.js', ssr: false }
-  ],
-  // some nuxt config...
-  css: [
-    'quill/dist/quill.snow.css',
-    'quill/dist/quill.bubble.css',
-    'quill/dist/quill.core.css'
-  ],
-  // some nuxt config...
-}