本文介绍在vue3环境下使用vue-quill富文本编辑器，并实现使用自定义上传接口将图片上传至服务器并保存为img标签src为服务器中图片的地址而不是默认的base64格式图片。从而解决富文本编辑器使用base64导致字段超长问题。
1.安装依赖库
npm install @vueup/vue-quill --save
npm install quill-image-uploader --savevue-quill为基础富文本组件
quill-image-uploader为图片上传扩展模块
2.引入组件
javascript">//局部引入
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.使用组件
javascript"><quill-editorclass="ql-editor":options="editorOption"v-model:content="form.content"content-type="html">
</quill-editor>其中content-type设置为html后v-model绑定的值则自动获取到为带html标签的文本
4.配置图片上传以及富文本组件
javascript">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'], // 链接、图片、视频],},此处需要使用自己的上传接口，下面为前端上传接口示例：
javascript">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;
}
