标签：picker 文本编辑 base64 snow value before data ql 图片
目录
一、安装依赖
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。