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

feat: 🚀 富文本自定义tabs功能

Browse Source
This commit is contained in:
yangchunlong
2025-07-24 15:21:08 +08:00
parent da149760cb
commit b3bffac35e
9 changed files with 1047 additions and 1534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,7 +38,14 @@
<!-- 标签页配置弹窗 -->
<div>
<el-dialog v-model="outerVisible" title="标签页配置" style="width: 900px; height: 900px">
<el-dialog
v-model="outerVisible"
title="标签页配置"
style="width: 1200px; height: 900px"
close-on-click-modal
close-on-press-escape
:before-close="handleBeforeClose"
>
<el-tabs
v-model="activeName"
type="card"
@@ -47,10 +54,39 @@
@edit="handleTabsEdit"
@tab-change="handleTabChange"
>
<el-tab-pane :label="item.title" :name="item.title" v-for="(item, index) in tabsData" :key="index">
<!-- 标签页编辑器：使用动态ref + 唯一ID -->
<!-- 标签页：标题支持编辑 -->
<el-tab-pane
:label="item.title"
:name="item.key"
v-for="(item, index) in tabsData"
:key="item.key"
@keydown.delete.stop
@keydown.backspace.stop
>
<template #label>
<div class="tab-title-edit">
<!-- 文字显示状态 -->
<span v-if="!item.isEditing" @click="startEditTitle(index)" class="title-text">
{{ item.title }}
</span>
<!-- 输入框编辑状态 -->
<el-input
@click.stop
@keydown.delete.stop
@keydown.backspace.stop
v-else
v-model="item.title"
:ref="el => (editInputRefs[index] = el)"
size="small"
class="title-input"
@blur="finishEditTitle(index)"
/>
</div>
</template>
<!-- 标签页编辑器内容 -->
<QuillEditor
:id="`tabEditor_${index}`"
:id="`tabEditor_${item.key}`"
:ref="
el => {
if (el) tabEditors[index] = el;
@@ -64,7 +100,7 @@
</el-tabs>
<template #footer>
<div class="dialog-footer">
<el-button @click="outerVisible = false">取消</el-button>
<el-button @click="handleQX">取消</el-button>
<el-button type="primary" @click="handleQR"> 确认 </el-button>
</div>
</template>
@@ -83,7 +119,7 @@ import { titleConfig } from "./titleConfig.js";
import { uploadVideo, uploadImg } from "@/api/modules/upload";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import { useMsg } from "@/hooks/useMsg";
// 字体配置
let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
@@ -108,13 +144,16 @@ const uploadFileVideo = ref(null);
const outerVisible = ref(false);
const imageList = ref([]);
const imageListDb = ref([]);
const tabsData = ref([]);
const activeName = ref(null);
const activeName = ref(null); // 跟踪当前激活的标签页key
const activeEditor = ref("main"); // 跟踪当前活跃编辑器：main/tab-索引
// 标签页数据（新增key作为唯一标识，isEditing控制编辑状态）
const tabsData = ref([]);
// 标签页编辑器ref数组
const tabEditors = ref([]);
// 标题编辑输入框的ref
const editInputRefs = ref([]);
const currentEditingTabsRef = ref(null);
// Props
const props = defineProps({
content: { type: String, default: "" },
@@ -131,7 +170,7 @@ const editorContent = computed({
});
const myQuillEditor = ref(null); // 主编辑器ref
// 主编辑器配置
// 主编辑器配置（保持不变）
const options = reactive({
theme: "snow",
debug: "warn",
@@ -172,7 +211,7 @@ const options = reactive({
readOnly: props.readOnly
});
// 标签页编辑器配置
// 标签页编辑器配置（保持不变）
const options1 = reactive({
theme: "snow",
debug: "warn",
@@ -193,14 +232,14 @@ const options1 = reactive({
handlers: {
image: function (value) {
if (value) {
const currentIndex = tabsData.value.findIndex(item => item.title === activeName.value);
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
activeEditor.value = `tab-${currentIndex}`;
proxy.$refs.uploadRef.click();
} else Quill.format("customImage", true);
},
video: function (value) {
if (value) {
const currentIndex = tabsData.value.findIndex(item => item.title === activeName.value);
const currentIndex = tabsData.value.findIndex(item => item.key === activeName.value);
activeEditor.value = `tab-${currentIndex}`;
document.querySelector("#uploadFileVideo")?.click();
} else Quill.format("customVideo", true);
@@ -212,7 +251,7 @@ const options1 = reactive({
readOnly: props.readOnly
});
// 上传前校验
// 上传前校验（保持不变）
const handleBeforeUpload = file => {
const fileType = file.type;
file.customUid = generateUUID();
@@ -234,7 +273,7 @@ const handleBeforeUpload = file => {
return true;
};
// 图片上传（仅修复最后一张删除问题）
// 图片上传（保持不变）
const handleHttpUpload = async options => {
let formData = new FormData();
formData.append("image", options.file);
@@ -246,14 +285,12 @@ const handleHttpUpload = async options => {
const { data } = result.data;
const { imgId } = result;
// 原有文件匹配逻辑保留
const fileItem = imageListDb.value.find(item => item.customUid === imgId);
if (fileItem) {
fileItem.serverImgId = imgId;
fileItem.path = data.path;
}
// 检查所有文件上传完成
const allFilesUploaded = imageListDb.value.every(item => item.path);
if (allFilesUploaded) {
let rawQuillEditor = "";
@@ -267,7 +304,6 @@ const handleHttpUpload = async options => {
quill = rawQuillEditor.getQuill();
}
// 关键修复：插入后强制刷新编辑器选区
imageListDb.value.forEach(item => {
const length = quill.getLength() - 1;
quill.insertEmbed(length, "customImage", {
@@ -277,9 +313,8 @@ const handleHttpUpload = async options => {
quill.setSelection(length + 1);
});
// 修复：清空数组前先保存最后一个光标位置
const finalLength = quill.getLength();
quill.setSelection(finalLength); // 确保光标在最后
quill.setSelection(finalLength);
imageList.value = [];
imageListDb.value = [];
@@ -287,11 +322,12 @@ const handleHttpUpload = async options => {
}
} catch (error) {
console.error("图片上传失败:", error);
// 异常时清理当前文件
imageList.value = imageList.value.filter(item => item.customUid !== options.file.customUid);
imageListDb.value = imageListDb.value.filter(item => item.customUid !== options.file.customUid);
}
};
// 视频上传（保持不变）
const handleVideoUpload = async evt => {
if (evt.target.files.length === 0) return;
const formData = new FormData();
@@ -318,85 +354,131 @@ const handleVideoUpload = async evt => {
console.log(error);
}
};
// // 视频上传（区分tab和主富文本）
// const handleVideoUpload = async evt => {
// if (evt.target.files.length === 0) return;
// const formData = new FormData();
// formData.append("video", evt.target.files[0]);
// try {
// const quill = await getCurrentQuillInstance();
// if (!quill) return;
// // 记录当前活跃编辑器类型，用于日志
// const editorType = activeEditor.value === "main" ? "主编辑器" : `标签页${activeEditor.value.split("-")[1]}`;
// console.log(`视频将插入到: ${editorType}`);
// const { data } = await uploadVideo(formData);
// const length = quill.selection.savedRange?.index || quill.getLength();
// quill.insertEmbed(length, "customVideo", {
// url: h + data.path,
// id: generateUUID()
// });
// evt.target.value = "";
// } catch (error) {
// console.error("视频上传失败:", error);
// ElNotification({ title: "上传失败", message: "视频上传出错", type: "error" });
// }
// };
// 标签页切换事件
const handleTabChange = tabTitle => {
const tabIndex = tabsData.value.findIndex(item => item.title === tabTitle);
// 标签页切换事件（基于key切换）
const handleTabChange = key => {
const tabIndex = tabsData.value.findIndex(item => item.key === key);
activeName.value = key;
activeEditor.value = `tab-${tabIndex}`;
console.log(`切换到标签页: ${tabTitle} (索引: ${tabIndex})`);
};
// 标签页编辑事件
const handleTabsEdit = (targetName, action) => {
console.log(action, "===action====");
// 标签页增删事件
const handleTabsEdit = (targetKey, action) => {
if (action === "add") {
if (tabsData.value.length > 5) {
return useMsg("error", "标签页已达上限 !");
}
// 新增标签页：生成唯一key，默认标题，初始不处于编辑状态
const newKey = `tab_${generateUUID()}`;
const newIndex = tabsData.value.length;
tabsData.value.push({ title: `标签${newIndex + 1}`, content: "" });
tabsData.value.push({
key: newKey,
title: `标签${newIndex + 1}`,
content: "",
isEditing: false // 新增时默认不编辑
});
nextTick(() => {
activeName.value = `标签${newIndex + 1}`;
activeName.value = newKey;
activeEditor.value = `tab-${newIndex}`;
// 新增后自动进入编辑状态
setTimeout(() => {
startEditTitle(newIndex);
}, 100);
});
} else if (action === "remove") {
const index = tabsData.value.findIndex(item => item.title === targetName);
// 删除标签页
const index = tabsData.value.findIndex(item => item.key === targetKey);
tabsData.value.splice(index, 1);
tabEditors.value.splice(index, 1);
editInputRefs.value.splice(index, 1);
// 修正 activeEditor 索引
// 调整活跃编辑器索引
if (activeEditor.value.startsWith("tab-")) {
const currentTabIndex = parseInt(activeEditor.value.split("-")[1]);
if (currentTabIndex > index) {
// 若当前活跃标签页在删除项之后，索引减1
activeEditor.value = `tab-${currentTabIndex - 1}`;
} else if (currentTabIndex === index) {
// 若删除的是当前活跃标签页，切换到第一个标签页
// 若删除当前活跃标签，切换到第一个或主编辑器
activeEditor.value = tabsData.value.length > 0 ? "tab-0" : "main";
activeName.value = tabsData.value.length > 0 ? tabsData.value[0].key : null;
}
}
}
};
// 其他方法
// 开始编辑标签页标题
const startEditTitle = index => {
const tab = tabsData.value[index];
if (!tab) return;
// 记录原始标题（用于取消编辑时恢复）
tab.originalTitle = tab.title;
tab.isEditing = true;
// 延迟获取焦点，确保输入框已渲染
nextTick(() => {
editInputRefs.value[index]?.focus();
});
};
// 完成编辑（失去焦点或回车）
const finishEditTitle = index => {
const tab = tabsData.value[index];
if (!tab) return;
// 校验标题（不能为空）
if (!tab.title.trim()) {
tab.title = tab.originalTitle || `标签${index + 1}`;
ElNotification({ title: "提示", message: "标签标题不能为空", type: "info" });
}
tab.isEditing = false;
// 更新activeName（如果当前编辑的是活跃标签）
if (tab.key === activeName.value) {
activeName.value = tab.key; // 触发重绘
}
};
// 其他方法（保持不变）
const onContentChange = content => {
emit("handleRichTextContentChange", content);
emit("update:content", content);
};
const setTabsInfo = () => {
outerVisible.value = false;
//清空
tabsData.value = [];
activeName.value = null;
activeEditor.value = "main";
};
//弹窗关闭前的钩子
const handleBeforeClose = () => {
setTabsInfo();
};
// 确认按钮点击事件（修改后）
const handleQR = () => {
const quill = toRaw(myQuillEditor.value)?.getQuill();
if (quill) {
const range = quill.getSelection(true);
if (!quill) return;
if (!tabsData.value.length) {
return useMsg("error", "标签页内容为空 !");
}
const range = quill.getSelection(true);
// 判断是否是编辑已有标签页（通过 currentEditingTabsRef 是否有值）
if (currentEditingTabsRef.value) {
// 1. 编辑模式：更新原有标签页组件
const blot = currentEditingTabsRef.value;
// 更新 blot 的数据（触发 DOM 更新）
blot.updateContents(tabsData.value); // 需要在 TabsBlot 中添加 updateContents 方法
// 清除编辑状态标记
currentEditingTabsRef.value = null;
} else {
// 2. 新增模式：插入新的标签页组件
quill.insertEmbed(range.index, "tabs", tabsData.value);
quill.setSelection(range.index + 1);
outerVisible.value = false;
}
// 关闭弹窗并清空临时数据
setTabsInfo();
};
//取消
const handleQX = () => {
setTabsInfo();
};
const initTitle = () => {
const editor = document.querySelector(".ql-editor");
if (editor) editor.dataset.placeholder = "";
@@ -405,9 +487,49 @@ const initTitle = () => {
if (tip) tip.setAttribute("title", item.title);
});
};
// 定义 loadTabsDataToEditor 函数
const loadTabsDataToEditor = tabs => {
// 清空现有数据
tabsData.value = [];
// 转换原始标签数据为编辑所需格式（添加key和编辑状态）
tabs.forEach((tab, index) => {
tabsData.value.push({
key: `tab_${generateUUID()}`, // 生成唯一key
title: tab.title || `标签${index + 1}`, // 避免空标题
content: tab.content || "", // 标签页内容
isEditing: false // 编辑状态标记
});
});
// 激活第一个标签页（如果有数据）
nextTick(() => {
if (tabsData.value.length > 0) {
activeName.value = tabsData.value[0].key;
activeEditor.value = "tab-0";
}
});
};
onMounted(() => {
initTitle();
// 监听编辑按钮点击事件
const editorEl = document.querySelector(".ql-editor");
if (editorEl) {
editorEl.addEventListener("edit-tabs", e => {
console.log(1232, "测试");
console.log(e.detail.blot, "=e.detail=");
const tabsData = TabsBlot.value(e.detail.blot.domNode);
console.log(tabsData, "=tabsData=");
if (tabsData.length > 0) {
// 保存当前编辑的标签页引用
currentEditingTabsRef.value = e.detail.blot;
console.log(currentEditingTabsRef.value, "=currentEditingTabsRef.value =");
// 加载数据到弹窗
loadTabsDataToEditor(tabsData);
// 显示弹窗
outerVisible.value = true;
}
});
}
});
defineExpose({
@@ -420,6 +542,7 @@ defineExpose({
}
});
</script>
<style lang="scss">
@import "./index.scss";
@@ -430,44 +553,20 @@ defineExpose({
user-select: text !important;
}
/* 标签页样式 */
// /* 标签页样式 */
.quill-tabs {
margin: 15px 0;
overflow: hidden;
border: 1px solid #dddddd;
border-radius: 4px;
}
/* 用伪元素添加图标（可替换为自己的图标） */
// /* 用伪元素添加图标（可替换为自己的图标） */
.ql-tabs::before {
font-size: 16px;
content: "T"; /* 用 emoji 或字体图标 */
}
.quill-tab-list {
display: flex;
background-color: #f8f9fa;
border-bottom: 1px solid #dddddd;
}
.quill-tab-button {
padding: 10px 15px;
font-weight: 500;
cursor: pointer;
background: transparent;
border: none;
transition: background-color 0.2s;
}
.quill-tab-button.active {
color: #007bff;
background-color: white;
border-bottom: 2px solid #007bff;
}
.quill-tab-content-list {
padding: 15px;
}
.quill-tab-content {
display: none;
}
.quill-tab-content.active {
display: block;
.title-input {
width: 100px;
margin: -2px 0; /* 与标签对齐 */
}
</style>