diff --git a/src/components/d2-quill/index.vue b/src/components/d2-quill/index.vue
index 6702a7c4..6df9adf4 100644
--- a/src/components/d2-quill/index.vue
+++ b/src/components/d2-quill/index.vue
@@ -19,6 +19,7 @@ export default {
   data () {
     return {
       Quill: undefined,
+      currentValue: '',
       options: {
         theme: 'snow',
         bounds: document.body,
@@ -45,23 +46,44 @@ export default {
       }
     }
   },
+  watch: {
+    value: {
+      handler (val) {
+        // 确认是新的值
+        if (val !== this.currentValue) {
+          this.currentValue = val
+          // 尝试更新
+          if (this.Quill) {
+            this.Quill.pasteHTML(this.value)
+          }
+        }
+      },
+      immediate: true
+    }
+  },
   mounted () {
     this.init()
   },
   methods: {
     init () {
       const editor = this.$refs.editor
+      // 初始化编辑器
       this.Quill = new Quill(editor, this.options)
       // 默认值
-      this.Quill.pasteHTML(this.value)
+      this.Quill.pasteHTML(this.currentValue)
       // 绑定事件
       this.Quill.on('text-change', (delta, oldDelta, source) => {
         const html = this.$refs.editor.children[0].innerHTML
         const text = this.Quill.getText()
         const quill = this.Quill
+        // 更新内部的值
+        this.currentValue = html
+        // 发出事件 v-model
         this.$emit('input', html)
+        // 发出事件
         this.$emit('change', { html, text, quill })
       })
+      // 将一些 quill 自带的事件传递出去
       this.Quill.on('text-change', (delta, oldDelta, source) => {
         this.$emit('text-change', delta, oldDelta, source)
       })
diff --git a/src/pages/demo/components/editor-quill/index.vue b/src/pages/demo/components/editor-quill/index.vue
index a19b59f1..a518f1a5 100644
--- a/src/pages/demo/components/editor-quill/index.vue
+++ b/src/pages/demo/components/editor-quill/index.vue
@@ -2,11 +2,16 @@
   <d2-container>
     <template slot="header">基本示例</template>
     <d2-quill
-      style="min-height: 200px;"
+      style="min-height: 200px; margin-bottom: 20px;"
       v-model="value"
       @text-change="textChangeHandler"
       @selection-change="selectionChangeHandler"
       @editor-change="editorChangeHandler"/>
+    <el-button
+      type="primary"
+      @click="handleAddRow">
+      添加一行
+    </el-button>
     <el-card shadow="never" class="d2-card d2-mt">
       <d2-highlight :code="value" format-html/>
     </el-card>
@@ -22,6 +27,9 @@ export default {
     }
   },
   methods: {
+    handleAddRow () {
+      this.value += '<p style="color: #409EFF;">我是新增的行</p>'
+    },
     textChangeHandler (delta, oldDelta, source) {
       // console.group('QuillEditor textChangeHandler')
       // console.log(delta, oldDelta, source)