富文本图片上传加强模块：quill-image-extend-module
参考地址：https://github.com/NextBoy/quill-image-extend-module
富文本上传后产生的base64图片.png
转换后对应的图片链接.png
第一步Install
使用npm或者yarn安装quill-image-extend-module
1 2 | npm install quill-image-extend-module --save-dev yarn add quill-image-extend-module |
第二步use
(注意，这个需要引入到有富文本编辑器的对应的那个vue文件中)
1 2 3 | import {quillEditor, Quill} from 'vue-quill-editor' import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module' Quill.register('modules/ImageExtend', ImageExtend) |
data()中放入
1.action:"后台接口地址"(请求地址的Api)
2.name: "后台接口地址参数name"(Api的请求体)
3.下面代码中headers请求头去掉注释,设置对应的请求头参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | editorOption: { modules: { ImageExtend: { loading: true, name: "后台接口地址参数name", size: 0.02, action: "后台接口地址", response: res => { return res.data.fileUrl; }, headers: (xhr,formData) => { //xhr.setRequestHeader( // "X-Nideshop-Token", // localStorage.getItem("token") //); }, // 可选参数 设置请求头部 sizeError: () => { return this.$message.error("图片超过50kb"); } // 图片超过大小的回调 }, toolbar: { container: [ ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线 ["blockquote", "code-block"], //引用，代码块 [{ header: 1 }, { header: 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: [] }], // 居中 ["link", "image"], ["clean"] ], handlers: { image: function() { QuillWatch.emit(this.quill.id); } } } } } |