vue下使用vue-quill-editor富文本框与el-upload上传组件相结合

1.使用npm安装vue-quill-editor

npm install vue-quill-editor -s

2.挂载到项目，这里使用的是全局挂载，在main.js中加入如下代码

import VueQuillEditoe from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditoe)

3.设置上传接口，创建api文件夹，在该文件夹下设置request.js与upload.js
其中request.js是用于封装axios请求，获取本地请求路径

import axios from 'axios'
/**
 * 封装axios请求
 */
// create an axios instance
const service = axios.create({
    baseURL: 'http://localhost:8080/ceshi/',//本地请求路径
    timeout: 5000 // request timeout
})

// request 拦截器，
service.interceptors.request.use(
    config => {
        // do something before request is sent
        //TODO: 请求拦截器，如设置Token
        return config
    },
    error => {
        // do something with request error
        console.log(error)
        return Promise.reject(error)
    }
)

// 响应拦截
service.interceptors.response.use(

    response => {
        //TODO: 响应拦截器，可以统一处理返回响应码
        return response
    },
    error => {
        return Promise.reject(error)
    }
)

export default service

upload.js为上传接口

import request from '@/api/request'

//图片上传
export function upload(data){
  return request({
    url:'/image/upload',
    method:'post',
    data:data,
    headers:{ "token": sessionStorage.getItem("token")}
  })
}

4.使用组件

<template>
  <div>
    <el-row style="left: 40px">
      <el-button @click="update" style="background-color: #42b983;color: white;left: 120px" icon="el-icon-edit-outline">编辑</el-button>
    </el-row>

    <el-form :modal="form">

      <el-form-item label="aboutUs:"  prop="about us" :label-width="formLabelWidth">
        <div class="ql-editor" v-html="content"></div><!--富文本框中的内容展示，包括图片，文字等信息-->
      </el-form-item>

    </el-form>


    <!--编辑-->
    <el-dialog title="编辑" :visible.sync="dialogApp1">
      <el-form :model="form1" ref="contractUs">
        <el-form-item label="aboutUs:"  prop="about us" :label-width="formLabelWidth">
          <!-- 1.第一步：引入上传图片组件并且设置其style为none -->
          <el-upload
            style="display: none"
            class="quill-avatar-uploader"
            :show-file-list="false"
            accept="image/png, image/jpeg, image/jpg"
            :before-upload="beforeAvatarUpload"
            :http-request="uploadLicencePicNo"
          >
          </el-upload>
          <quill-editor  ref="myQuillEditor"
                        :options="editorOption"
                        :content="content"
                        @change="onEditorChange($event)">

          </quill-editor>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogApp1=false">取消</el-button>
        <el-button @click="edit" style="background-color: #409EFF;color: white">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { Message } from "element-ui";
import {upload} from '@/api/upload'

  // 工具栏配置
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction

    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    [{'header': [1, 2, 3, 4, 5, 6, false]}],

    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    [{'font': []}],
    [{'align': []}],
    ['link', 'image', 'video'],
    ['clean']                                         // remove formatting button
  ]

    export default {
        name: "index",
      data() {
        return {
          content: "",    // 富文本框内容展示

          editorOption: {
            modules: {
              toolbar: {
                container: toolbarOptions,  // 工具栏
                handlers: {
                  //自定义图片上传
                  'image': function (value) {
                    if (value) {
                      document.querySelector('.quill-avatar-uploader input').click()
                    } else {
                      this.quill.format('image', false);
                    }
                  }
                }
              }
            }
          },



          dialogApp1:false,
          formLabelWidth:'120px',
        }
      },
      methods:{

        // 文字内容
        onEditorChange({ quill, html, text }) {
          this.content = html; // 保存输入的内容
        },
        /* ----------第三步：编写上传事件，并且将内容放置于展示区域-----------*/
        // 图片上传前---格式与大小验证
        beforeAvatarUpload(file) {
          let isPass = false;
          if (
            file.type === "image/png" ||
            file.type === "image/jpeg" ||
            file.type === "image/jpg"
          ) {
            isPass = true;
          }
          const isLt = file.size / 1024 / 1024 < 5;
          if (!isPass) {
            this.$message.error("当前仅支持上传图片JPG/jpeg/png格式!");
            return false;
          }
          if (!isLt) {
            this.$message.error("上传图片大小不能超过 5MB!");
            return false;
          }
          return isPass && isLt;
        },


        // 图片-上传操作
        uploadLicencePicNo(e) {
          // 打开上传动画
          const loading = this.$loading({
            lock: true,
            text: "上传中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          // 调用上传接口将文件传递给后台 --- 这里uploadFile()是上传文件接口
          let formData = new FormData();
          formData.append("image", e.file);
          upload(formData).then((res) => {
              // 如果上传成功，就可以获得相关路径如：http:xxxx.jpg,我这里是在res.data.url中
              if (res.data.code=="0") {
                /*---核心操作区域---start---*/
                // 获取富文本组件实例
                let quill = this.$refs["myQuillEditor"].quill;
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片insertEmbed()三个参数，前两个固定即可
                quill.insertEmbed(length, "image", "http://website.s.muicc.com"+res.data.data);
                // 调整光标到最后
                quill.setSelection(length + 1);
                /*---核心操作区域---end---*/
              } else {
                this.$message.error("图片插入失败！");
              }
              // 关闭上传动画
              loading.close();
            })
            .catch(() => {
              // 错误，则关闭上传动画
              loading.close();
            });
        },
          listAboutUs(){
            list().then(res=>{
              if(res.data.code=="0"){
                this.content=res.data.data.companyAbout;
              }else{
                Message.error(res.data.message);
              }
            })
          },
          //富文本框中的内容修改
        update(){
            this.dialogApp1=true;
        },
        edit(){
          let data={
            "companyAbout":this.content
          }
          add(data).then(res=>{
            if(res.data.code=="0"){
              Message.success(res.data.message);
              this.listAboutUs();
              this.dialogApp1=false;
            }else{
              Message.error(res.data.message);
            }
          })
        }
      },
      created() {
          this.listAboutUs();
      }
    }
</script>