本文介绍在vue3环境下使用vue-quill富文本编辑器,并实现使用自定义上传接口将图片上传至服务器并保存为img标签src为服务器中图片的地址而不是默认的base64格式图片。从而解决富文本编辑器使用base64导致字段超长问题。
1.安装依赖库
npm install @vueup/vue-quill --save
npm install quill-image-uploader --save
vue-quill为基础富文本组件
quill-image-uploader为图片上传扩展模块
2.引入组件
//局部引入
import { QuillEditor, Quill } from '@vueup/vue-quill';
import ImageUploader from "quill-image-uploader";
import '@vueup/vue-quill/dist/vue-quill.snow.css';
Quill.register("modules/imageUploader", ImageUploader);
export default {
components: {
QuillEditor
},
}
3.使用组件
<quill-editor
class="ql-editor"
:options="editorOption"
v-model:content="form.content"
content-type="html">
</quill-editor>
其中content-type设置为html后v-model绑定的值则自动获取到为带html标签的文本
4.配置图片上传以及富文本组件
editorOption: {
modules: {
imageUploader: {
upload: async (file) => {
let res = await uploadFileAPI({file}) // 此处为自己的上传接口
return res.data.filePath // 此处替换为接口返回的文件路径
}
},
toolbar: [
['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'], // 清除文本格式
['link', 'image', 'video'], // 链接、图片、视频
],
},
此处需要使用自己的上传接口,下面为前端上传接口示例:
export const uploadFileAPI = (data) => {
return request({
url: "/file/upload",
method: "post",
data,
headers: { // 如果接口报错,检查是不是加了这个参数
"Content-Type": "multipart/form-data"
}
})
}
后端接口示例(此处使用的为本地nginx文件服务器,可替换为云服务器地址):
final String UPLOAD_DIRECTORY = "D:/Project/FileServer/"; // 此处为本地存储路径示例
final String BASE_URL = "http://localhost:9090/"; // 本地文件服务器url
@PostMapping("/upload")
public R uploadFile(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return R.failed("请选择要上传的文件");
}
try {// 获取原始文件名
String originalFilename = file.getOriginalFilename();
// 生成新的文件名,以防止文件名冲突
String newFilename = null;
if (originalFilename != null) {
newFilename = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));
}
// 文件保存路径
String filePath = UPLOAD_DIRECTORY + newFilename;
// 保存文件到服务器
file.transferTo(new File(filePath));
// 返回文件上传成功的相关信息
Map<String, String> res = new HashMap<>();
res.put("fileName", newFilename);
res.put("filePath", BASE_URL + newFilename);
return R.ok(res, "上传成功");
} catch (Exception e) {
return R.failed("文件上传失败: " + e.getMessage());
}
}
5.汉化富文本工具栏
/deep/ .ql-snow .ql-tooltip[data-mode=link]::before {
content: "请输入链接地址:";
}
/deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: '保存';
padding-right: 0px;
}
/deep/ .ql-snow .ql-tooltip[data-mode=video]::before {
content: "请输入视频地址:";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
content: '10px';
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
content: '18px';
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
content: '32px';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '文本';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: '标题1';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: '标题2';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: '标题3';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: '标题5';
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: '标题6';
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '标准字体';
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
content: '衬线字体';
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
content: '等宽字体';
}
/deep/ .ql-align-center{
text-align: center;
}
/deep/ .ql-align-right{
text-align: right;
}
/deep/ .ql-align-left{
text-align: left;
}