拓展富文本编辑器，上传图片功能

components/common/c-quill-editor.vue

+<!--
+ * @Author: tangjiale
+ * @eMail: 932055106@qq.com
+ * @Date: 2022-06-27 14:10:41
+ * @LastEditors: tangjiale
+ * @LastEditTime: 2022-06-27 15:11:42
+-->
+<template>
+  <div style="width:100%">
+     <client-only style="width:100%">
+      <div style="width:100%">
+        <quill-editor style="width:100%"
+          ref="myQuillEditor"
+          :value="quillContent"
+          :options="editorOption"
+          @change="onEditorChange"
+        ></quill-editor>
+          
+        <el-upload style="width:100%"
+          accept="image/png,image/jpeg,image/jpg,image/gif"
+          class="avatar-uploader quill-img"
+          name="imageFile"
+          :before-upload="getcloudDataMthod"
+          :action="pictureUrl"
+          :multiple="false"
+          :show-file-list="false"       
+          :on-success="uploadSuccess"
+          :headers="uploadHeadData"
+        >
+        </el-upload>
+      </div>
+    </client-only>
+  </div>
+</template>
+
+<script>
+
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'], 
+  [{ header: 1 }, { header: 2 }], 
+  [{ list: 'ordered' }, { list: 'bullet' }], 
+  [{ indent: '-1' }, { indent: '+1' }], 
+  [{ direction: 'rtl' }], 
+  [{ color: [] }, { background: [] }],
+  [{ align: [] }],
+  ['image'], 
+]
+export default {
+  props: {
+    quillContent: {
+      type: String,
+      default: '',
+    },
+  },
+  services:['base'],
+  data(){
+    const _this = this
+    return {
+      pictureUrl: 'https://test.xiaobentiyu.cn/pxpcapi/common/image',
+      uploadHeadData:null,
+      editorOption: {
+        theme: 'snow',
+        modules: {
+          toolbar: {
+            container: toolbarOptions, 
+            handlers: {
+              image(value) {
+                if (value) {
+                  document.querySelector('.quill-img input').click()
+                } else {
+                  _this.quill.format('image', false)
+                }
+              },
+            },
+          },
+        },
+      },
+    }
+  },
+  methods: {
+    async getcloudDataMthod(file) {  
+      let formData = new FormData();
+      formData.append("imageFile", file);
+
+      let userInfo = this.myUserInfo || {}
+      //头部传参
+      this.uploadHeadData = {
+        token: userInfo.token || ''
+      }
+    },
+ 
+    uploadSuccess(res) {
+      let quill = this.$refs.myQuillEditor.quill
+      // 如果上传成功
+      if (res.code && res.code == 200) {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片，res为服务器返回的图片链接地址
+        quill.insertEmbed(length, 'image', res.data)
+        // 调整光标到最后
+        quill.setSelection(length + 1)
+      } else {
+        // 提示信息，需引入Message
+        this.$message.error('图片插入失败！')
+      }
+    },
+    onEditorChange(e) {
+      this.$emit('updateQuillContent', e.html)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

pages/components/add-course.vue

@@ -3,7 +3,7 @@
  * @eMail: 932055106@qq.com
  * @Date: 2022-06-06 09:28:37
  * @LastEditors: tangjiale
- * @LastEditTime: 2022-06-27 10:03:24
+ * @LastEditTime: 2022-06-27 15:13:10
 -->
 <template>
   <div class="add-course-bg">
@@ -80,7 +80,8 @@
       </el-form-item>
 
       <el-form-item label="课程详情：" prop="detail" class="curstom-editor">
-        <quill-editor :options="editorOption" v-model="param.detail"></quill-editor>
+        <!-- <quill-editor :options="editorOption" v-model="param.detail"></quill-editor> -->
+        <c-quill-editor style="width:100%" :quillContent="param.detail" @updateQuillContent="quillContent"></c-quill-editor>
       </el-form-item>
 
       <div class="btns">
@@ -94,8 +95,10 @@
 
 <script>
 import { Loading } from 'element-ui';
+import cQuillEditor from '../../components/common/c-quill-editor.vue'
 export default {
   services:['base','course'],
+  components:{cQuillEditor},
   data(){
     return{
       param:{
@@ -135,6 +138,9 @@ export default {
     
   },
   methods:{
+    quillContent(e){
+      this.param.detail = e
+    },
     handCheck(e){
       this.mangerList = []
       this.mangerSelect = []
@@ -308,6 +314,7 @@ export default {
 }
 /deep/ .el-form-item__content{
   height: auto !important;
+  width: 100%;
 }
 .image-ctn{
   height: 208px;