优化图片上传，加入图床同步功能

src/views/components/Editor.vue

@@ -1,26 +1,33 @@
 <template>
-  <div>
-    <div ref="editor" class="text" />
-    <div style="margin: 12px 5px;font-size: 16px;font-weight: bold;color: #696969">HTML渲染如下：</div>
-    <div class="editor-content" v-html="editorContent" />
+  <div class="app-container">
+    <p class="warn-content">
+      Markdown 基于
+      <el-link type="primary" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599" target="_blank">wangEditor</el-link>
+      ，图片上传使用 <el-link type="primary" href="https://sm.ms/" target="_blank">SM.MS</el-link>
+    </p>
+    <el-row :gutter="10">
+      <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
+        <div ref="editor" class="text" />
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9">
+        <div v-html="editorContent" />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import { upload } from '@/utils/upload'
 import E from 'wangeditor'
-import { getToken } from '@/utils/auth'
 export default {
   name: 'Editor',
   data() {
     return {
-      headers: {
-        'Authorization': getToken()
-      },
       editorContent:
-        `<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>富文本中图片上传使用的是 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>`
     }
@@ -31,13 +38,20 @@ export default {
     ])
   },
   mounted() {
+    const _this = this
     var editor = new E(this.$refs.editor)
-    editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
-    // 不可修改
-    editor.customConfig.uploadImgHeaders = this.headers
-    // 自定义文件名，不可修改，修改后会上传失败
-    editor.customConfig.uploadFileName = 'file'
-    editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
+    // 自定义菜单配置
+    editor.customConfig.zIndex = 10
+    // 文件上传
+    editor.customConfig.customUploadImg = function(files, insert) {
+      // files 是 input 中选中的文件列表
+      // insert 是获取图片 url 后，插入到编辑器的方法
+      files.forEach(image => {
+        upload(_this.imagesUploadApi, image).then(data => {
+          insert(data.data.url)
+        })
+      })
+    }
     editor.customConfig.onchange = (html) => {
       this.editorContent = html
     }
@@ -49,11 +63,10 @@ export default {
 </script>
 
 <style scoped>
-  .editor-content{
-    padding-left: 5px;
-  }
   .text {
     text-align:left;
-    margin: 5px
+  }
+  /deep/ .w-e-text-container {
+    height: 420px !important;
   }
 </style>