富文本编辑器图片上传base64存数据库改为服务器图片路径
作者：互联网
目录
一、安装依赖
npm install quill-image-super-solution-module --savePS：如果不想npm引入可以直接把quill-image-super-solution-module开源项目中的index.js下载下来，丢到自己的项目中（我自己用的是这种方式，方便自己修改js）
二、新建组件
<template>
<div>
<quill-editor v-model="editorValue" :options="editorOption"> </quill-editor>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "@/components/EditorDc/js";
Quill.register("modules/ImageExtend", ImageExtend);
export default {
name: "EditorDC",
props: {
value: {
type: [String, Number],
default: "",
},
},
components: { quillEditor },
data() {
return {
editorValue: "",
// 富文本框参数设置
editorOption: {
placeholder: "请输入内容",
modules: {
ImageExtend: {
// 可选参数 是否显示上传进度和提示语
loading: true,
// 图片参数名
name: "file",
// 可选参数 图片大小，单位为M，1M = 1024kb
size: 2,
// 服务器地址, 如果action为空，则采用base64插入图片
action: process.env.VUE_APP_BASE_API + "/common/uploadImage",
// 可选 可上传的图片格式
// Optional, uploadable image format
accept: "image/jpg, image/png, image/gif, image/jpeg, image/bmp, image/x-icon",
// response 为一个函数用来获取服务器返回的具体图片地址
// 例如服务器返回 {code: 200; data:{ url: 'baidu.com'}}
response: (res) => {
return res.fileName;
},
// 可选参数 设置请求头部
headers: (xhr) => {
xhr.setRequestHeader("Authorization", 'Bearer ' + getToken());
},
// 图片超过大小的回调
sizeError: () => {
alert("图片大小超过 2 M");
},
// 可选参数 自定义开始上传触发事件
start: () => {},
// 可选参数 自定义上传结束触发的事件，无论成功或者失败
end: () => {},
// 可选参数 上传失败触发的事件
error: () => {},
// 可选参数 上传成功触发的事件
success: () => {},
// 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
change: (xhr, formData) => {},
},
toolbar: {
// container为工具栏，此次引入了全部工具栏，也可自行配置
container: container,
handlers: {
image: function() {
// 劫持原来的图片点击按钮事件
QuillWatch.emit(this.quill.id);
},
},
},
},
},
};
},
watch: {
value: {
handler(val) {
this.editorValue = val;
},
immediate: true,
},
editorValue(val) {
this.$emit("input", val);
},
},
methods: {
onEditorChange({ editor, html, text }) {
this.editorValue = html;
},
}
};
</script>
<style>
.editor, .ql-toolbar {
white-space: pre-wrap!important;
line-height: normal !important;
}
.quill-img {
display: none;
}
.ql-editor{
height: 200px;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}
</style>三、组件引入
<EditorDc v-model="form.noticeContent"/>import EditorDc from '@/components/EditorDc/index';
components: {
EditorDc
},四、问题整理
1、若依中图片无法回显
参考：若依官方文档：图片上传成功不能显示（https://doc.ruoyi.vip/ruoyi-vue/other/faq.html#%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0%E6%88%90%E5%8A%9F%E4%B8%8D%E8%83%BD%E6%98%BE%E7%A4%BA）
2、配置nginx后403
nginx.conf中加上user root;即：nginx启动用户
参考：https://www.cnblogs.com/williamjie/p/9604594.html
标签：picker,文本编辑,base64,snow,value,before,data,ql,图片 来源： https://blog.csdn.net/qq_19309473/article/details/116274990