富文本公共组件

src/components/Editor/index.vue

@@ -10,7 +10,7 @@
     <el-popover popper-class="ql-popover" width="398" ref="popover">
       <el-form>
         <el-form-item label="视频链接">
-          <el-input v-model="videoForm.src" placeholder="请输入视频链接">
+          <el-input v-model="videoUrl" placeholder="请输入视频链接">
             <template slot="append">
               <Upload @upload="upload" />
             </template>
@@ -18,7 +18,7 @@
         </el-form-item>
         <el-form-item style="margin-top: 15px;">
           <el-button @click="closeVideo">取消</el-button>
-          <el-button type="primary" @click="handleUploadSuccess()" :disabled="videoForm.src == ''">确定</el-button>
+          <el-button type="primary" @click="handleUploadSuccess()" :disabled="videoUrl == ''">确定</el-button>
         </el-form-item>
       </el-form>
     </el-popover>
@@ -109,9 +109,7 @@ export default {
         readOnly: this.readOnly,
       },
       // 视频表单
-      videoForm: {
-        src: ''
-      }
+      videoUrl: ''
     };
   },
   computed: {
@@ -188,7 +186,7 @@ export default {
 
     // 上传视频
     upload(e) {
-      this.videoForm.src = e.file
+      this.videoUrl = e.file
     },
 
     // 上传图片之前
@@ -209,9 +207,10 @@ export default {
       if (quill.getSelection()) {
         let length = quill.getSelection().index
         let key = res ? "image" : "view"
-        let form = res ? res.data : this.videoForm
+        let form = res ? res.data : this.videoUrl
         quill.insertEmbed(length, key, form)
         quill.setSelection(length + 1)
+        this.closeVideo()
       } else {
         this.$message.error("请先聚焦于富文本输入框，再插入视频")
       }
@@ -220,7 +219,7 @@ export default {
     // 关闭视频弹框
     closeVideo() {
       this.$refs.popover.showPopper = false
-      this.videoForm = {}
+      this.videoUrl = ''
     },
 
   },
@@ -324,7 +323,7 @@ export default {
 
 .ql-popover {
   top: 66px;
-  right: 1px;
+  left: 300px;
 
   .el-input-group__append,
   .el-input-group__prepend {