修复外部修改数据无法触发更新的 bug

Former-commit-id: 03d095d49bfee17f7ba355a6cdd5a59cbb95d80a [formerly 03d095d49bfee17f7ba355a6cdd5a59cbb95d80a [formerly 03d095d49bfee17f7ba355a6cdd5a59cbb95d80a [formerly 03d095d49bfee17f7ba355a6cdd5a59cbb95d80a [formerly ee00a9a643c513d59dff1cc739dc0a566bce63b4 [formerly 715c6c4ed9855dcc7ad775195f6686a427d085d3]]]]]
Former-commit-id: e567a7e3db7019f2567f9fa769fea6639e75dd42
Former-commit-id: 6df46229a1ccd1e341501e9fee419999e9daeeca
Former-commit-id: d3781c6cdf7e414047cafc9a7244a7abc6e7b778 [formerly a8d000bfdbfc4872d1383f17e8e8f6a4bdb239c3]
Former-commit-id: 1f6bad0a0b3462e6a53692af6a153b0c7fbdd0ae
Former-commit-id: e693037a587d7ddab5d87f311a4a0eda1a2c0c0b
Former-commit-id: 8294c8385c4852f8cf0a2f21cf3ac655918845f1
Former-commit-id: 7ab11d42decf2d1bba7c26919ca86de20f664918
Former-commit-id: 4ef43b3c25ce828467141dafb206bf6bc9ade6d3

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)
       })

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)