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

200
src/components/Editor/index2.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,31 @@
@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">
<template #label>
<div class="tab-title-edit">
<!-- 文字显示状态 -->
<span v-if="!item.isEditing" @click="startEditTitle(index)" class="title-text">
{{ item.title }}
</span>
<!-- 输入框编辑状态 -->
<el-input
v-else
v-model="item.title"
:ref="el => (editInputRefs[index] = el)"
size="small"
class="title-input"
@blur="finishEditTitle(index)"
@keyup.enter="finishEditTitle(index)"
@keyup.esc="cancelEditTitle(index)"
/>
</div>
</template>
<!-- 标签页编辑器内容 -->
<QuillEditor
:id="`tabEditor_${index}`"
:id="`tabEditor_${item.key}`"
:ref="
el => {
if (el) tabEditors[index] = el;
@@ -64,7 +92,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>
@@ -108,12 +136,15 @@ 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([]);
// Props
const props = defineProps({
@@ -131,7 +162,7 @@ const editorContent = computed({
});
const myQuillEditor = ref(null); // 主编辑器ref
// 主编辑器配置
// 主编辑器配置（保持不变）
const options = reactive({
theme: "snow",
debug: "warn",
@@ -172,7 +203,7 @@ const options = reactive({
readOnly: props.readOnly
});
// 标签页编辑器配置
// 标签页编辑器配置（保持不变）
const options1 = reactive({
theme: "snow",
debug: "warn",
@@ -193,14 +224,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 +243,7 @@ const options1 = reactive({
readOnly: props.readOnly
});
// 上传前校验
// 上传前校验（保持不变）
const handleBeforeUpload = file => {
const fileType = file.type;
file.customUid = generateUUID();
@@ -234,7 +265,7 @@ const handleBeforeUpload = file => {
return true;
};
// 图片上传（仅修复最后一张删除问题）
// 图片上传（保持不变）
const handleHttpUpload = async options => {
let formData = new FormData();
formData.append("image", options.file);
@@ -246,14 +277,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 +296,6 @@ const handleHttpUpload = async options => {
quill = rawQuillEditor.getQuill();
}
// 关键修复：插入后强制刷新编辑器选区
imageListDb.value.forEach(item => {
const length = quill.getLength() - 1;
quill.insertEmbed(length, "customImage", {
@@ -277,9 +305,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 +314,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,84 +346,114 @@ 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) => {
// 标签页增删事件
const handleTabsEdit = (targetKey, action) => {
if (action === "add") {
// 新增标签页：生成唯一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);
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 = "";
@@ -419,6 +477,7 @@ defineExpose({
}
});
</script>
<style lang="scss">
@import "./index.scss";
@@ -469,4 +528,23 @@ defineExpose({
.quill-tab-content.active {
display: block;
}
/* 标签页标题编辑样式 */
.tab-title-edit {
display: flex;
align-items: center;
.title-text {
display: inline-block;
min-width: 60px;
padding: 0 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.title-input {
width: 100px;
margin: -2px 0; /* 与标签对齐 */
}
}
</style>