From f4672d465a7514cfa33ee5968e01f0da59841b17 Mon Sep 17 00:00:00 2001
From: "j.yao.SUSE" <everhopingandwaiting@users.noreply.github.com>
Date: Fri, 1 Nov 2019 12:44:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0v-model=EF=BC=8C=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=8F=8C=E5=90=91=E7=BB=91=E5=AE=9A=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=20(#44)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用 ：
1. 导入组件
2.  <Editor v-model="value" />
---
 src/views/components/Editor.vue | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/views/components/Editor.vue b/src/views/components/Editor.vue
index bb9e08a..5f05b24 100644
--- a/src/views/components/Editor.vue
+++ b/src/views/components/Editor.vue
@@ -1,11 +1,7 @@
 <template>
   <div>
     <div ref="editor" style="text-align:left;margin: 5px">
-      <h3 style="text-align: center;">欢迎使用 wangEditor 富文本编辑器!</h3>
-      <ul>
-        <li>富文本中图片上传使用的是sm.ms图床，支持上传到七牛云：<a style="color: #42b983" target="_blank" href="https://sm.ms/">sm.ms</a></li>
-        <li>更多帮助请查看官方文档：<a style="color: #42b983" target="_blank" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599">wangEditor</a></li>
-      </ul>
+      <div v-html="editorContent"/>
     </div>
     <div style="margin: 12px 5px;font-size: 16px;font-weight: bold;color: #696969">HTML渲染如下：</div>
     <div class="editor-content" v-html="editorContent"/>
@@ -13,17 +9,28 @@
 </template>
 
 <script>
+import { debounce } from 'lodash'
 import { mapGetters } from 'vuex'
 import E from 'wangeditor'
 import { getToken } from '@/utils/auth'
 export default {
   name: 'Editor',
+  model: {
+    prop: 'value',
+    event: 'editorChange'
+  },
+  props: {
+    value: {
+      type: String,
+      default: () => ''
+    }
+  },
   data() {
     return {
       headers: {
         'Authorization': 'Bearer ' + getToken()
       },
-      editorContent:
+      editorContent: this.value ||
         `<h3 style="text-align: center;">欢迎使用 wangEditor 富文本编辑器!</h3>
         <ul>
           <li>富文本中图片上传使用的是sm.ms图床，支持上传到七牛云：<a style="color: #42b983" target="_blank" href="https://sm.ms/">sm.ms</a></li>
@@ -44,9 +51,10 @@ export default {
     // 自定义文件名，不可修改，修改后会上传失败
     editor.customConfig.uploadFileName = 'file'
     editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
-    editor.customConfig.onchange = (html) => {
+    editor.customConfig.onblur = debounce(html => {
+      this.$emit('editorChange', html)
       this.editorContent = html
-    }
+    }, 1000)
     editor.create()
   }
 }