yangchunlong/orico-officialWebsite-ts-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 图片上传按顺序回显

Browse Source
This commit is contained in:
yangchunlong
2025-07-16 15:36:48 +08:00
parent ebef3963f8
commit e24a4adec6
10 changed files with 1147 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/Editor/index.scss
View File

@@ -24,7 +24,7 @@
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
content: "12px";
}
.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 {
@@ -78,3 +78,149 @@
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
font-family: SimSun, sans-serif;
content: "宋体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
font-family: SimHei, sans-serif;
content: "黑体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
font-family: "Microsoft YaHei", sans-serif;
content: "微软雅黑";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
font-family: KaiTi, sans-serif;
content: "楷体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
font-family: FangSong, sans-serif;
content: "仿宋";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
font-family: Arial, sans-serif;
content: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
font-family: "Times New Roman", sans-serif;
content: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
font-family: sans-serif;
content: "sans-serif";
}
.ql-font-SimSun {
font-family: SimSun, sans-serif;
}
.ql-font-SimHei {
font-family: SimHei, sans-serif;
}
.ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei", sans-serif;
}
.ql-font-KaiTi {
font-family: KaiTi, sans-serif;
}
.ql-font-FangSong {
font-family: FangSong, sans-serif;
}
.ql-font-Arial {
font-family: Arial, sans-serif;
}
.ql-font-Times-New-Roman {
font-family: "Times New Roman", sans-serif;
}
.ql-font-sans-serif {
font-family: sans-serif;
}
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
// content: "10px";
// }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
content: "20px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
content: "22px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
content: "24px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
content: "26px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
content: "28px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
content: "30px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
content: "32px";
}
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
// content: "32px";
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
// content: "36px";
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="38px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="38px"]::before {
// content: "38px";
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
// content: "40px";
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="42px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="42px"]::before {
// content: "44px";
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="44px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="44px"]::before {
// content: "44px";
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="45px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="45px"]::before {
// content: "45px";
// }
// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="50px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="50px"]::before {
// content: "50px";
// }

327
src/components/Editor/index.vue
View File

@@ -4,15 +4,14 @@
action="#"
:multiple="true"
:show-file-list="false"
:http-request="handleHttpUpload"
:before-upload="handleBeforeUpload"
:http-request="() => {}"
:before-upload="() => false"
@change="handleFileChange"
class="editor-img-uploader"
accept=".jpeg,.jpg,.png,.gif"
>
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
</el-upload>
<!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
<input
type="file"
accept="video/*"
@@ -43,195 +42,219 @@ import { h } from "@/utils/url";
import { routerObj } from "./utils.js";
import { titleConfig } from "./titleConfig.js";
import { uploadVideo, uploadImg } from "@/api/modules/upload";
// 引入插入图片标签自定义的类
// 字体配置
let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
Quill.register(fontSizeStyle, true);
// 自定义模块
import ImageBlot from "./quill-image";
import Video from "./quill-video";
const uuid = ref("id-" + generateUUID());
const $router = useRouter();
const routerValueName = $router.currentRoute.value.name;
const routerName = ref(routerObj[routerValueName]);
Quill.register(Video);
Quill.register(ImageBlot);
// 路由相关
const $router = useRouter();
const routerValueName = $router.currentRoute.value.name;
const routerName = ref(routerObj[routerValueName]);
// 核心：上传队列 + 临时去重集合（单次上传会话有效）
const uploadQueue = ref([]);
const isProcessing = ref(false);
const uuid = ref(generateUUID());
// 临时去重集合：仅在当前批次上传中去重，全部完成后清空
const tempProcessedFiles = ref(new Set());
// 编辑器基础
const { proxy } = getCurrentInstance();
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
const uploadFileVideo = ref(null);
const myQuillEditor = ref(null);
const oldContent = ref("");
// Props
const props = defineProps({
/* 编辑器的内容 */
content: {
type: String,
default: ""
},
/* 只读 */
readOnly: {
type: Boolean,
default: false
},
// 上传文件大小限制(MB)
fileSizeLimit: {
type: Number,
default: 10
}
content: { type: String, default: "" },
readOnly: { type: Boolean, default: false },
fileSizeLimit: { type: Number, default: 10 }
});
//值
// 内容双向绑定
const editorContent = computed({
get: () => props.content,
set: val => {
emit("update:content", val);
}
set: val => emit("update:content", val)
});
//富文本ref
const myQuillEditor = ref(null);
//富文本值
const oldContent = ref("");
//富文本配置项
// 编辑器配置
const options = reactive({
theme: "snow",
debug: "warn",
modules: {
// 工具栏配置
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ size: fontSizeStyle.whitelist }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }],
[{ align: [] }],
["clean"],
["link", "image", "video"]
],
handlers: {
// 重写图片上传事件
image: function (value) {
if (value) {
//调用图片上传
proxy.$refs.uploadRef.click();
} else {
Quill.format("image", true);
}
},
video: function (value) {
if (value) {
// 劫持原来的视频点击按钮事件
document.querySelector("#uploadFileVideo")?.click();
} else {
Quill.format("video", true);
}
}
image: () => proxy.$refs.uploadRef.click(),
video: () => document.querySelector("#uploadFileVideo")?.click()
}
}
},
placeholder: "请输入内容...",
readOnly: props.readOnly,
clipboard: {
matchers: [
[
"img",
(node, delta) => {
const src = node.getAttribute("src");
const id = node.getAttribute("id");
delta.insert({ image: { src, id: id } });
}
]
]
}
readOnly: props.readOnly
});
//上传前的钩子
const handleBeforeUpload = file => {
const fileType = file.type;
// 图片
if (
fileType == "image/jpeg" ||
fileType == "image/png" ||
fileType == "image/gif" ||
fileType == "image/jpg" ||
fileType == "image/bmp" ||
fileType == "image/webp" ||
fileType == "video/mov" ||
fileType == "video/ts" ||
fileType == "video/mp4" ||
fileType == "video/avi"
) {
const fileSizeLimit = file.size;
// 校检文件大小
const isLt = fileSizeLimit / 1024 / 1024 < props.fileSizeLimit;
if (!isLt) {
console.log(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
alert(`上传文件大小不能超过 ${props.fileSizeLimit} MB!`);
// 处理文件选择（临时去重，仅当前批次有效）
const handleFileChange = (file, fileList) => {
if (!fileList.length) return;
const rawEditor = toRaw(myQuillEditor.value);
const quill = rawEditor?.getQuill();
if (!quill) return;
// 获取初始光标位置
let baseCursorIndex = quill.selection.savedRange?.index || 0;
// 生成文件唯一标识（用于临时去重）
const getFileKey = file => `${file.name}-${file.size}-${file.lastModified}`;
// 过滤当前批次中已选择的重复文件（但允许和历史批次重复）
const newFiles = fileList.filter(item => {
const file = item.raw;
const key = getFileKey(file);
// 仅在当前批次内去重（避免单次选择中重复添加）
if (tempProcessedFiles.value.has(key)) {
console.log(`当前批次中已包含文件: ${file.name}`);
return false;
} else {
console.log(`RIch MB!`);
return true;
}
} else {
alert(`文件格式不正确！`);
return false;
}
};
//图片上传
const handleHttpUpload = async options => {
let formData = new FormData();
//这里要根据后端设置的name设置key值,如果name是file就传file是image就传image
formData.append("image", options.file);
try {
const result = await uploadImg(formData, routerName.value);
if (result?.code === 0) {
const { data } = result;
let rawMyQuillEditor = toRaw(myQuillEditor.value);
// 获取富文本实例
let quill = rawMyQuillEditor.getQuill();
// 获取光标位置
let length = quill.selection.savedRange.index;
quill.insertEmbed(length, "image", {
url: h + data.path,
id: generateUUID()
});
quill.setSelection(length + 1);
}
} catch (error) {}
};
// 校验文件合法性
if (!validateFile(file)) return false;
// 添加到临时去重集合
tempProcessedFiles.value.add(key);
return true;
});
//视频上传
const handleVideoUpload = async evt => {
if (evt.target.files.length === 0) {
if (!newFiles.length) {
alert("所选文件已在当前上传批次中或不合法");
return;
}
const formData = new FormData();
formData.append("video", evt.target.files[0]);
try {
let quill = toRaw(myQuillEditor.value).getQuill();
// 获取光标位置
let length = quill.selection.savedRange.index;
const { data } = await uploadVideo(formData);
quill.insertEmbed(length, "video", {
url: h + data.path, //h + data.fileUrl, //
id: generateUUID()
// 按选择顺序添加到队列
newFiles.forEach((item, index) => {
uploadQueue.value.push({
file: item.raw,
cursorIndex: baseCursorIndex + index
});
uploadFileVideo.value.value = "";
} catch (error) {
console.log(error);
});
// 启动队列处理
if (!isProcessing.value) {
processQueue();
}
};
// 监听富文本内容变化，删除被服务器中被用户回车删除的图片
// 文件校验
const validateFile = file => {
const isImage = file.type.startsWith("image/");
if (!isImage) {
alert("请上传图片文件");
return false;
}
const fileSizeMB = file.size / 1024 / 1024;
if (fileSizeMB > props.fileSizeLimit) {
alert(`文件 ${file.name} 大小超过 ${props.fileSizeLimit} MB`);
return false;
}
return true;
};
// 处理上传队列（全部完成后清空临时去重集合）
const processQueue = async () => {
if (isProcessing.value || uploadQueue.value.length === 0) return;
isProcessing.value = true;
const { file, cursorIndex } = uploadQueue.value[0];
try {
// 上传文件
const formData = new FormData();
formData.append("image", file);
const result = await uploadImg(formData, routerName.value);
if (result?.code === 0) {
const rawEditor = toRaw(myQuillEditor.value);
const quill = rawEditor.getQuill();
// 插入图片
quill.insertEmbed(cursorIndex, "image", {
url: h + result.data.path,
id: generateUUID()
});
quill.setSelection(cursorIndex + 1);
}
} catch (error) {
console.error(`文件 ${file.name} 上传失败:`, error);
} finally {
uploadQueue.value.shift();
// 若队列已空，清空临时去重集合（允许下次上传相同文件）
if (uploadQueue.value.length === 0) {
tempProcessedFiles.value.clear();
}
isProcessing.value = false;
// 继续处理下一个
processQueue();
}
};
// 视频上传（保持不变）
const handleVideoUpload = async evt => {
if (evt.target.files.length === 0) return;
const file = evt.target.files[0];
const formData = new FormData();
formData.append("video", file);
try {
const rawEditor = toRaw(myQuillEditor.value);
const quill = rawEditor.getQuill();
const cursorIndex = quill.selection.savedRange?.index || 0;
const { data } = await uploadVideo(formData);
quill.insertEmbed(cursorIndex, "video", {
url: h + data.path,
id: generateUUID()
});
quill.setSelection(cursorIndex + 1);
} catch (error) {
console.error("视频上传失败:", error);
} finally {
evt.target.value = "";
}
};
// 内容变化监听
const onContentChange = content => {
emit("handleRichTextContentChange", content);
};
// 增加hover工具栏有中文提示
// 初始化标题提示
const initTitle = () => {
document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
for (let item of titleConfig.value) {
let tip = document.querySelector(".ql-toolbar " + item.Choice);
if (!tip) continue;
tip.setAttribute("title", item.title);
for (const item of titleConfig.value) {
const tip = document.querySelector(`.ql-toolbar ${item.Choice}`);
if (tip) tip.setAttribute("title", item.title);
}
};
onMounted(() => {
initTitle();
oldContent.value = props.content;

10
src/components/Editor/lineHeight.js Normal file
View File

@@ -0,0 +1,10 @@
//lineHeight.js
import Quill from "quill";
const Parchment = Quill.import("parchment");
class lineHeightAttributor extends Parchment.Attributor.Style {}
const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
scope: Parchment.Scope.INLINE,
whitelist: ["1", "2", "3", "4", "5"]
});
export { lineHeightStyle };

124
src/components/Editor/quill-custom-fontsize.js Normal file
View File

@@ -0,0 +1,124 @@
// 自定义字体大小模块，支持预设选项和输入框
export class CustomFontSize {
constructor(quill, options) {
this.quill = quill;
this.options = options;
// 创建工具栏容器
const container = quill.getModule("toolbar").container;
// 创建字体大小选择器
this.selector = document.createElement("select");
this.selector.classList.add("ql-size");
// 添加预设选项
options.presets.forEach(size => {
if (size === false) {
// 添加分隔线
const option = document.createElement("option");
option.disabled = true;
option.innerHTML = "──────────";
this.selector.appendChild(option);
} else {
// 添加预设大小选项
const option = document.createElement("option");
option.value = size;
option.innerHTML = this.getSizeLabel(size);
this.selector.appendChild(option);
}
});
// 添加自定义输入选项
const inputOption = document.createElement("option");
inputOption.value = "custom";
inputOption.innerHTML = "自定义";
this.selector.appendChild(inputOption);
// 创建自定义输入框
this.input = document.createElement("input");
this.input.type = "number";
this.input.placeholder = "输入字号";
this.input.min = 1;
this.input.style.width = "50px";
this.input.style.display = "none"; // 默认隐藏
// 将选择器和输入框添加到工具栏
container.appendChild(this.selector);
container.appendChild(this.input);
// 绑定事件
this.selector.addEventListener("change", this.onSelectChange.bind(this));
this.input.addEventListener("change", this.onInputChange.bind(this));
this.quill.on("text-change", this.update.bind(this));
// 初始化
this.update();
}
// 获取大小标签
getSizeLabel(size) {
const labels = {
small: "小",
normal: "正常",
large: "大",
huge: "超大"
};
return labels[size] || size;
}
// 选择器变更事件
onSelectChange() {
const value = this.selector.value;
if (value === "custom") {
// 显示输入框
this.input.style.display = "inline-block";
this.input.focus();
} else {
// 隐藏输入框并应用选择的大小
this.input.style.display = "none";
this.quill.format("size", value);
}
}
// 输入框变更事件
onInputChange() {
const value = this.input.value;
if (value) {
this.quill.format("size", `${value}px`);
}
// 选择"自定义"选项，保持输入框显示
this.selector.value = "custom";
}
// 更新当前选中状态
update() {
const selection = this.quill.getSelection();
if (selection) {
const [format] = this.quill.getFormat(selection.index, 1);
const size = format.size;
if (size && size.endsWith("px")) {
const sizeValue = size.replace("px", "");
this.input.value = sizeValue;
// 如果是预设值，选中对应的选项
if (this.options.presets.includes(size)) {
this.selector.value = size;
this.input.style.display = "none";
} else {
// 否则选中"自定义"并显示输入框
this.selector.value = "custom";
this.input.style.display = "inline-block";
}
} else {
// 没有选中的大小，重置为默认
this.selector.value = "normal";
this.input.style.display = "none";
}
}
}
}
// // 注册自定义模块
// Quill.register("modules/customFontSize", CustomFontSize);