Merge branch 'hotfix/富文本编辑器v-model问题' into develop

Former-commit-id: 19fd5340ab249a8668bf5a9b32e766282a9039f1 [formerly f9ebc7fdb4a20a1d59240d4b1177af09cd1fcb48] [formerly 19fd5340ab249a8668bf5a9b32e766282a9039f1 [formerly f9ebc7fdb4a20a1d59240d4b1177af09cd1fcb48] [formerly 19fd5340ab249a8668bf5a9b32e766282a9039f1 [formerly f9ebc7fdb4a20a1d59240d4b1177af09cd1fcb48] [formerly f9ebc7fdb4a20a1d59240d4b1177af09cd1fcb48 [formerly 5a56941cb788f282ae3949cac4191fd7e196d6f1 [formerly 52651999c81f22f5087ae4587a0e4ac7abbc12ff]]]]]
Former-commit-id: b554a641e67cc41fbc4fd0f95c6c1274728b2f64
Former-commit-id: 7c8e409937e2755116b90672fdf419d8a091f297
Former-commit-id: e39e8644a2908b264d83b55d949159cd878d48c9 [formerly 96a3f274d1c89a0e2a1aed846eca04e6df8c5008]
Former-commit-id: 295010da2f4b51e5fb3187bb5d13621a84267281
Former-commit-id: d188b00662a9680036fe9f443dca377426e6cfd6
Former-commit-id: 391dcf356f0146708044f98761a47bce751a9453
Former-commit-id: 10bb6e21340472fc277de8028ead0119a4b8d78c
Former-commit-id: 52c02aa237b45a65a375ac6ae136e1d07229b668

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)