vue-quill-editor 自定义上传图片

vue-quill-editor + el-upload

安装 vue-quill-editor

npm install vue-quill-editor -s
.挂载到项目,我这里使用的是全局挂载,挂载到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)

页面使用

  1. html部分
 <quill-editor
            class="edioorBox"
            v-model="dataValue.showContent"
            ref="myQuillEditor"
            :options="editorOption"
          ></quill-editor>
  1. js部分 editorOption 配置在data中
 editorOption: {
          modules: {
            toolbar: {
              container: [
                ["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: [] }],
                ["image"], //去除video即可
              ],
              handlers: {
                image: function (value) {
                  if(value){
                    document.querySelector(".avatar-uploader input").click();
                  }else{
                    this.quill.format("image", false);
                  }
                },
              },
            },
          },
          placeholder: "编辑内容...",
        },
  1. 上传插入图片事件 methdos中
// 上传图片
    UploadImg(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      axios
        .post(`/dev-api/tradeapi/qycg/fileInfo/upload`, formData, {
          type: "upload",
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
            if(res.data.code==200){
                this.editorSelection(res.data.data)
            }else{
                this.$message.error(res.data.message)
            }
        })
        .catch(err=>{
            this.$message.error('图片上传失败!!!')
        })
    },

    // 图片上传前
    beforePicUpload() {},

    // 富文本中插入图片
    editorSelection(imageUrl) {
      let quill = this.$refs.myQuillEditor.quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片,imageUrl为服务器返回的图片链接地址
      quill.insertEmbed(length, "image", imageUrl);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
  },

全部代码

<template>
  <el-card v-loading="loading">
    <el-form :model="dataValue" ref="Form" label-width="auto">
      <el-form-item label="内容" prop="showContent" :span="24">
        <quill-editor
          class="edioorBox"
          v-model="dataValue.showContent"
          ref="myQuillEditor"
          :options="editorOption"
        ></quill-editor>
      </el-form-item>
    </el-form>
    <el-upload
      class="avatar-uploader"
      style="display: noen"
      action="#"
      limit="1"
      :http-request="UploadImg"
      :before-upload="beforePicUpload"
    >
      <el-button type="primary" plain>上传</el-button>
    </el-upload>
  </el-card>
</template>
  <script>
import axios from "axios";

export default {
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ["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: [] }],
              ["image"], //去除video即可
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
        placeholder: "编辑内容...",
      },
    };
  },
  
  methods: {
    // 上传图片
    UploadImg(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      axios
        .post(`/dev-api/tradeapi/qycg/fileInfo/upload`, formData, {
          type: "upload",
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((res) => {
            if(res.data.code==200){
                this.editorSelection(res.data.data)
            }else{
                this.$message.error(res.data.message)
            }
        })
        .catch(err=>{
            this.$message.error('图片上传失败!!!')
        })
    },

    // 图片上传前
    beforePicUpload() {},

    // 富文本中插入图片
    editorSelection(imageUrl) {
      let quill = this.$refs.myQuillEditor.quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片,imageUrl为服务器返回的图片链接地址
      quill.insertEmbed(length, "image", imageUrl);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
  },
};
</script>
  <style lang="scss" scoped>
::v-deep .ql-editor {
  min-height: 300px;
}

.fileBox {
  .title {
    font-weight: 600;
    margin-bottom: 8px;
  }
}

.bottomBox {
  display: flex;
  margin-top: 16px;
  justify-content: flex-end;
}
</style>
 

功能概述

该功能使用自定义上传事件 通过handlers自定义富文本按钮事件来触发upload的 如下

 handlers: {
              image: function (value) {
                if (value) {
                // 该位置触发 uopload 
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },

之后根据光标所在位置插入图片 如下函数将图片插入到富文本框中

 editorSelection(imageUrl) {
      let quill = this.$refs.myQuillEditor.quill;
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片,imageUrl为服务器返回的图片链接地址
      quill.insertEmbed(length, "image", imageUrl);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值