编辑器添加图片与超链接完成

pages/main/index/cert_edit.vue

@@ -67,11 +67,22 @@
         <el-button type="primary" @click="clickCancel">取消</el-button>
       </el-form-item>
     </el-form>
+    <el-upload
+      style="display: none;"
+      action="/api/admin/cert/uploadImg"
+      :show-file-list="false"
+      :on-success="handleEditorImgSuccess"
+      :before-upload="beforeAvatarUpload"
+    >
+      <el-button ref="chooseEditorImg" slot="trigger" size="small" type="primary">选取文件</el-button>
+    </el-upload>
   </div>
 </template>
 
 <script>
 const ruleForm = 'ruleForm'
+// 插入图片或其他元素到编辑器的位置
+let addRange = { index: 0 }
 
 export default {
   data() {
@@ -91,7 +102,8 @@ export default {
             [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
             [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
             [{ 'font': [] }],
-            ['clean']                                         // remove formatting button
+            ['clean'],                                         // remove formatting button
+            ['link', 'image'],
           ]
         }
       },
@@ -146,9 +158,30 @@ export default {
   mounted() {
     this.getDetail()
     this.getStatus()
+    setTimeout(() => {
+      this.$refs.quillEditor.quill.getModule('toolbar').addHandler('image', this.imageHandle)
+    }, 1000)
   },
   methods: {
     /**
+     * 编辑图图片上传成功
+     */
+    handleEditorImgSuccess(res, file) {
+      let url = res.data.file_url_abs
+      this.$refs.quillEditor.quill.insertEmbed(addRange.index, 'image', url)
+    },
+    /**
+     * 点击编辑器图片按钮事件
+     * @param {boolean} state 一个不知道什么的状态
+     */
+    imageHandle(state) {
+      if(state) {
+        addRange = this.$refs.quillEditor.quill.getSelection()
+        console.log({ addRange })
+        this.$refs.chooseEditorImg.$el.click()
+      }
+    },
+    /**
      * 状态选择变化
      */
     changeSelect(val) {