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

Former-commit-id: 22011040da4bf68c494a488f353a69e4a16ff0f0 [formerly 22011040da4bf68c494a488f353a69e4a16ff0f0 [formerly 22011040da4bf68c494a488f353a69e4a16ff0f0 [formerly 22011040da4bf68c494a488f353a69e4a16ff0f0 [formerly ac3ed605d580a5262c6405bc2ab776c824e42a88 [formerly 439632beaa140830f3e390e2c89b2477c7cdeca2]]]]]
Former-commit-id: f2bc770b086154232761c602588893dd3f2583d7
Former-commit-id: 4a7a51b14746fb7f60e9ed86bb874beb6c1942b4
Former-commit-id: ec33ed389b21cbed73a2f75bf73cdfe77b656d3a [formerly 2231e325c2f82183e5608ea1c8e77c1ae0b86c9c]
Former-commit-id: cf9166a480adb35f83f0a137b549bc1c1c94ace6
Former-commit-id: 8b83ba1c7b6ce967d40ff71c3a551e8674eb4f92
Former-commit-id: 34dbbf25cf08c3af918bdffa7eec4a2ab7b32bd6
Former-commit-id: ffe3491785ad69acae32579332ae2fff74284c02
Former-commit-id: 7a13e03b3dc906a792b687a789d29fb7a6ecc135

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)