vue项目中 使用 quill-editor 上传视频与图片（查询多处资料后的总结）

1，首先下载quill-editor的相关依赖,比较推荐用 yarn 依赖下载比较快速

npm i vue-quill-editor

npm i quill

npm i quill-video-image-module

2，页面内标签

<quill-editor
    ref="quill"
    @change="$forceUpdate()"
    v-model="temp.shareInformationExplain"
    class="myQuillEditor"
    :options="editorOption"
    maxlength="200"
    show-word-limit
/>
<input type="file" @change="inpChange" id="upload" style="display:none;" />

引入

import {Quill, quillEditor} from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import video from "quill-video-image-module/video";
import { VideoExtend, QuillVideoWatch} from "quill-video-image-module";
import { ImageExtend } from "quill-image-extend-module";

2.1 注入 ImageExtend，VideoExtend

Quill.register("modules/ImageExtend", ImageExtend);
Quill.register("modules/VideoExtend", VideoExtend);

3，根据需要配置 toolbar工具栏的工具选项

const toolbarOptions = [    ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
    ["blockquote", "code-block"], // 引用，代码块
    [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
    [{ list: "ordered" }, { list: "bullet" }], // 列表
    [{ script: "sub" }, { script: "super" }], // 上下标
    [{ indent: "-1" }, { indent: "+1" }], // 缩进
    [{ direction: "rtl" }], // 文本方向
    [{ size: ["small", false, "large", "huge"] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
    [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
    [{ font: [] }], // 字体
    [{ align: [] }], // 对齐方式
    ["clean"], // 清除字体样式
    ["image", "video",""],// 上传图片、上传视频
];

4，在components引入组件

components: {quillEditor},

data() {
    return {
         //设置请求头 store.getters.token 为自己项目的token
        headers: {Authorization: store.getters.token},
        editorOption: {
            placeholder: "请输入...",
            modules: {
                ImageExtend: {
                    loading: true,
                    name: "img",
                     //上传的服务器地址
                    action: "上传的服务器地址",
                    headers: (xhr) => {
                        xhr.setRequestHeader("Authorization", store.getters.token);
                        console.log("==================",xhr);
                    },
                    response: res => {
                        return formatImgUrl(res.data.store);
                    },
                },
                VideoExtend: {
                    loading: true,
                    name: "file",
                     // 可选参数 视频大小，单位为M，1M = 1024kb
                    size: 100,
                     // 视频上传接口
                    action: "视频上传接口",
                    headers: (xhr) => {
                        xhr.setRequestHeader("Authorization", store.getters.token);
                        console.log("==================",xhr);
                    },
                    change: (xhr, formData) => {
                        formData.append("key", localStorage.getItem("token"));
                    },
                    response: (res) => {
                        console.log("__________",res);
                         //formatImgUrl quill-editor自带图片转base64
                         //这里由于本项目不需要转base64，做处理返回自己需要的地址
                        return formatImgUrl(res.data.store);
                    },
                    sizeError: () => {
                        alert("视频不能大于100M");
                    },
                },
                toolbar: {
                    container: toolbarOptions, //工具栏
                    handlers: {
                        image: function(value) {
                            if (value) {
                                document.querySelector("#upload").click();
                            } else {
                                this.quill.format("image", false);
                            }
                        },
                        video: function() {
                            QuillVideoWatch.emit(this.quill.id);
                        },
                    },
                },
            },
            theme: "snow",
        },
      
        quillLength: 0,
    };
},

methods: {
    inpChange(e){
        let file = e.target.files[0];
        let formData = new FormData();
        formData.append("file", file);
        //请求接口
        uploadFileResponse(formData).then(res => {
            let quill = this.$refs.quill.quill;
            if (res.status == 200) {
                const formdata = _.extend({}, this.formdata);
                let length = quill.getSelection().index;//光标位置
                // 插入图片  图片地址
                quill.insertEmbed(length, "image", formatImgUrl(res.data.store));
                // 调整光标到最后
                quill.setSelection(length + 1);
            }
        });
    },
  
},