feat: 🚀 富文本自定义tabs功能
This commit is contained in:
5
src/components.d.ts
vendored
5
src/components.d.ts
vendored
@@ -7,7 +7,6 @@ export {}
|
||||
|
||||
declare module "vue" {
|
||||
export interface GlobalComponents {
|
||||
Editor: typeof import("./components/Editor/index.vue")["default"];
|
||||
ElAside: typeof import("element-plus/es")["ElAside"];
|
||||
ElAutocomplete: typeof import("element-plus/es")["ElAutocomplete"];
|
||||
ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
|
||||
@@ -61,10 +60,6 @@ declare module "vue" {
|
||||
IEpRemove: typeof import("~icons/ep/remove")["default"];
|
||||
IEpSearch: typeof import("~icons/ep/search")["default"];
|
||||
IEpSwitchButton: typeof import("~icons/ep/switch-button")["default"];
|
||||
Index2: typeof import("./components/Editor/index2.vue")["default"];
|
||||
Index3333: typeof import("./components/Editor/index3333.vue")["default"];
|
||||
Index444: typeof import("./components/Editor/index444.vue")["default"];
|
||||
Index5555: typeof import("./components/Editor/index5555.vue")["default"];
|
||||
RouterLink: typeof import("vue-router")["RouterLink"];
|
||||
RouterView: typeof import("vue-router")["RouterView"];
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,370 +0,0 @@
|
||||
<template>
|
||||
<!-- 原有模板代码不变 -->
|
||||
<el-upload
|
||||
:id="uuid"
|
||||
action="#"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:http-request="handleHttpUpload"
|
||||
:before-upload="handleBeforeUpload"
|
||||
class="editor-img-uploader"
|
||||
accept=".jpeg,.jpg,.png,.gif"
|
||||
>
|
||||
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
||||
</el-upload>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
name="file"
|
||||
ref="uploadFileVideo"
|
||||
id="uploadFileVideo"
|
||||
@change="handleVideoUpload"
|
||||
style="width: 0; height: 0; cursor: pointer; opacity: 0"
|
||||
/>
|
||||
<div class="editor">
|
||||
<QuillEditor
|
||||
id="editorId"
|
||||
ref="myQuillEditor"
|
||||
v-model:content="editorContent"
|
||||
contentType="html"
|
||||
@update:content="onContentChange"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Editor">
|
||||
// 原有导入语句不变
|
||||
import { QuillEditor, Quill } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
import { h } from "@/utils/url";
|
||||
import { routerObj } from "./utils.js";
|
||||
import { titleConfig } from "./titleConfig.js";
|
||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||
import { ElNotification } from "element-plus";
|
||||
|
||||
// 字体配置保留
|
||||
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
|
||||
Quill.register(fontSizeStyle, true);
|
||||
|
||||
// 自定义Blot保留
|
||||
import ImageBlot from "./quill-image";
|
||||
import Video from "./quill-video";
|
||||
import TabsBlot from "./quill-tabs";
|
||||
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);
|
||||
Quill.register(TabsBlot);
|
||||
// 原有响应式变量和props保留
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||
const uploadFileVideo = ref(null);
|
||||
const imageList = ref([]);
|
||||
const imageListDb = ref([]);
|
||||
const props = defineProps({
|
||||
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);
|
||||
}
|
||||
});
|
||||
const myQuillEditor = ref(null);
|
||||
|
||||
// 工具栏配置保留
|
||||
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: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video", "tabs"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) proxy.$refs.uploadRef.click();
|
||||
else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) document.querySelector("#uploadFileVideo")?.click();
|
||||
else Quill.format("customVideo", true);
|
||||
},
|
||||
tabs: function () {
|
||||
const quill = this.quill;
|
||||
const range = quill.getSelection(true);
|
||||
|
||||
// 创建默认的双标签页结构
|
||||
const tabsData = {
|
||||
tabs: [
|
||||
{ title: "标签 1", content: "这是第一个标签页的内容" },
|
||||
{ title: "标签 2", content: "这是第二个标签页的内容" }
|
||||
]
|
||||
};
|
||||
|
||||
// 插入标签页Blot
|
||||
quill.insertEmbed(range.index, "tabs", tabsData);
|
||||
quill.setSelection(range.index + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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 } });
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// 恢复排序函数（原有代码保留）
|
||||
const sortImageListByNumber = () => {
|
||||
imageListDb.value.sort((a, b) => {
|
||||
const getNumber = fileName => {
|
||||
const match = fileName.match(/-(\d+)$/);
|
||||
return match ? parseInt(match[1], 10) : 0;
|
||||
};
|
||||
const numA = getNumber(a.name);
|
||||
const numB = getNumber(b.name);
|
||||
return numA - numB;
|
||||
});
|
||||
};
|
||||
|
||||
// 上传前钩子保留（仅修复错误处理）
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
file.customUid = generateUUID();
|
||||
imageListDb.value.push(file);
|
||||
sortImageListByNumber(); // 保留排序调用
|
||||
|
||||
const validTypes = [
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"image/gif",
|
||||
"image/jpg",
|
||||
"image/bmp",
|
||||
"image/webp",
|
||||
"video/mov",
|
||||
"video/ts",
|
||||
"video/mp4",
|
||||
"video/avi"
|
||||
];
|
||||
|
||||
if (validTypes.includes(fileType)) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
|
||||
if (!isLt) {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `上传文件大小不能超过 ${props.fileSizeLimit} MB!`,
|
||||
type: "warning"
|
||||
});
|
||||
// 仅移除当前无效文件（原有逻辑修复）
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `文件格式不正确！`,
|
||||
type: "warning"
|
||||
});
|
||||
// 仅移除当前无效文件（原有逻辑修复）
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 图片上传（仅修复最后一张删除问题）
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
formData.append("image", options.file);
|
||||
imageList.value.push(options.file);
|
||||
|
||||
try {
|
||||
const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
if (result?.data?.code === 0) {
|
||||
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) {
|
||||
const rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
const quill = rawMyQuillEditor.getQuill();
|
||||
|
||||
// 关键修复：插入后强制刷新编辑器选区
|
||||
imageListDb.value.forEach(item => {
|
||||
const length = quill.getLength() - 1;
|
||||
quill.insertEmbed(length, "customImage", {
|
||||
url: h + item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
quill.setSelection(length + 1);
|
||||
});
|
||||
|
||||
// 修复：清空数组前先保存最后一个光标位置
|
||||
const finalLength = quill.getLength();
|
||||
quill.setSelection(finalLength); // 确保光标在最后
|
||||
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
}
|
||||
}
|
||||
} 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();
|
||||
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, "customVideo", {
|
||||
url: h + data.path,
|
||||
id: generateUUID()
|
||||
});
|
||||
uploadFileVideo.value.value = "";
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 内容变化监听（增加选区修复）
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
emit("update:content", content);
|
||||
console.log(content, "================content=================");
|
||||
// 修复：当内容为空时确保编辑器可编辑
|
||||
const rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
if (rawMyQuillEditor) {
|
||||
const quill = rawMyQuillEditor.getQuill();
|
||||
if (content === "") {
|
||||
quill.setText("");
|
||||
|
||||
editorContent.value = "";
|
||||
quill.enable(true);
|
||||
quill.setSelection(0); // 强制设置光标位置
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 原有初始化和清空方法保留
|
||||
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) tip.setAttribute("title", item.title);
|
||||
}
|
||||
};
|
||||
|
||||
const clearEditor = () => {
|
||||
const rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
if (rawMyQuillEditor) {
|
||||
const quill = rawMyQuillEditor.getQuill();
|
||||
quill.setText("");
|
||||
editorContent.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
});
|
||||
|
||||
defineExpose({ clearEditor });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
|
||||
// 增加编辑器内容区交互性确保删除可用
|
||||
.ql-editor {
|
||||
min-height: 600px; // 确保空编辑器也有点击区域
|
||||
cursor: text !important;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
@@ -1,446 +0,0 @@
|
||||
<template>
|
||||
<!-- 原有模板代码不变 -->
|
||||
<el-upload
|
||||
:id="uuid"
|
||||
action="#"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:http-request="handleHttpUpload"
|
||||
:before-upload="handleBeforeUpload"
|
||||
class="editor-img-uploader"
|
||||
accept=".jpeg,.jpg,.png,.gif"
|
||||
>
|
||||
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
||||
</el-upload>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
name="file"
|
||||
ref="uploadFileVideo"
|
||||
id="uploadFileVideo"
|
||||
@change="handleVideoUpload"
|
||||
style="width: 0; height: 0; cursor: pointer; opacity: 0"
|
||||
/>
|
||||
<div class="editor">
|
||||
<QuillEditor
|
||||
id="editorId"
|
||||
ref="myQuillEditor"
|
||||
v-model:content="editorContent"
|
||||
contentType="html"
|
||||
@update:content="onContentChange"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<el-dialog v-model="outerVisible" title="标签页配置" style="width: 900px; height: 900px">
|
||||
<!-- 头部 -->
|
||||
<div style="margin-bottom: 30px">
|
||||
<el-button type="primary" @click="handleTabsClick">+添加标签</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" type="card" class="demo-tabs" editable @edit="handleTabsEdit">
|
||||
<el-tab-pane :label="item.title" :name="item.title" v-for="(item, index) in tabsData" :key="index">
|
||||
<QuillEditor
|
||||
id="editorId1"
|
||||
ref="myQuillEditor1"
|
||||
v-model:content="item.content"
|
||||
contentType="html"
|
||||
:options="options1"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="outerVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleQR"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Editor">
|
||||
// 原有导入语句不变
|
||||
import { QuillEditor, Quill } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
import { h } from "@/utils/url";
|
||||
import { routerObj } from "./utils.js";
|
||||
import { titleConfig } from "./titleConfig.js";
|
||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||
import { ElNotification } from "element-plus";
|
||||
|
||||
// 字体配置保留
|
||||
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
|
||||
Quill.register(fontSizeStyle, true);
|
||||
|
||||
// 自定义Blot保留
|
||||
import ImageBlot from "./quill-image";
|
||||
import Video from "./quill-video";
|
||||
import TabsBlot from "./quill-tabs";
|
||||
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);
|
||||
Quill.register(TabsBlot);
|
||||
// 原有响应式变量和props保留
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||
const uploadFileVideo = ref(null);
|
||||
const outerVisible = ref(false);
|
||||
const imageList = ref([]);
|
||||
const imageListDb = ref([]);
|
||||
const tabsData = ref([]);
|
||||
const activeName = ref(null);
|
||||
const props = defineProps({
|
||||
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);
|
||||
}
|
||||
});
|
||||
const myQuillEditor = ref(null);
|
||||
const myQuillEditor1 = ref(null);
|
||||
// 工具栏配置保留
|
||||
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: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video", "tabs"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) proxy.$refs.uploadRef.click();
|
||||
else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) document.querySelector("#uploadFileVideo")?.click();
|
||||
else Quill.format("customVideo", true);
|
||||
},
|
||||
tabs: function (value) {
|
||||
outerVisible.value = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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 } });
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const options1 = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
["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("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) document.querySelector("#uploadFileVideo")?.click();
|
||||
else Quill.format("customVideo", true);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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 } });
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// 恢复排序函数（原有代码保留）
|
||||
const sortImageListByNumber = () => {
|
||||
imageListDb.value.sort((a, b) => {
|
||||
const getNumber = fileName => {
|
||||
const match = fileName.match(/-(\d+)$/);
|
||||
return match ? parseInt(match[1], 10) : 0;
|
||||
};
|
||||
const numA = getNumber(a.name);
|
||||
const numB = getNumber(b.name);
|
||||
return numA - numB;
|
||||
});
|
||||
};
|
||||
|
||||
// 上传前钩子保留（仅修复错误处理）
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
file.customUid = generateUUID();
|
||||
imageListDb.value.push(file);
|
||||
sortImageListByNumber(); // 保留排序调用
|
||||
|
||||
const validTypes = [
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"image/gif",
|
||||
"image/jpg",
|
||||
"image/bmp",
|
||||
"image/webp",
|
||||
"video/mov",
|
||||
"video/ts",
|
||||
"video/mp4",
|
||||
"video/avi"
|
||||
];
|
||||
|
||||
if (validTypes.includes(fileType)) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
|
||||
if (!isLt) {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `上传文件大小不能超过 ${props.fileSizeLimit} MB!`,
|
||||
type: "warning"
|
||||
});
|
||||
// 仅移除当前无效文件（原有逻辑修复）
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `文件格式不正确！`,
|
||||
type: "warning"
|
||||
});
|
||||
// 仅移除当前无效文件（原有逻辑修复）
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 图片上传（仅修复最后一张删除问题）
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
formData.append("image", options.file);
|
||||
imageList.value.push(options.file);
|
||||
|
||||
try {
|
||||
const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
if (result?.data?.code === 0) {
|
||||
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) {
|
||||
const rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
const quill = rawMyQuillEditor.getQuill();
|
||||
|
||||
// 关键修复：插入后强制刷新编辑器选区
|
||||
imageListDb.value.forEach(item => {
|
||||
const length = quill.getLength() - 1;
|
||||
quill.insertEmbed(length, "customImage", {
|
||||
url: h + item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
quill.setSelection(length + 1);
|
||||
});
|
||||
|
||||
// 修复：清空数组前先保存最后一个光标位置
|
||||
const finalLength = quill.getLength();
|
||||
quill.setSelection(finalLength); // 确保光标在最后
|
||||
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
}
|
||||
}
|
||||
} 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();
|
||||
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, "customVideo", {
|
||||
url: h + data.path,
|
||||
id: generateUUID()
|
||||
});
|
||||
uploadFileVideo.value.value = "";
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 内容变化监听（增加选区修复）
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
emit("update:content", content);
|
||||
// 修复：当内容为空时确保编辑器可编辑
|
||||
const rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
if (rawMyQuillEditor) {
|
||||
const quill = rawMyQuillEditor.getQuill();
|
||||
if (content === "") {
|
||||
quill.setText("");
|
||||
|
||||
editorContent.value = "";
|
||||
quill.enable(true);
|
||||
quill.setSelection(0); // 强制设置光标位置
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 原有初始化和清空方法保留
|
||||
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) tip.setAttribute("title", item.title);
|
||||
}
|
||||
};
|
||||
|
||||
const clearEditor = () => {
|
||||
const rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
if (rawMyQuillEditor) {
|
||||
const quill = rawMyQuillEditor.getQuill();
|
||||
quill.setText("");
|
||||
editorContent.value = "";
|
||||
}
|
||||
};
|
||||
const handleQR = () => {
|
||||
const rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
const quill = rawMyQuillEditor.getQuill();
|
||||
const range = quill.getSelection(true);
|
||||
// // 插入标签页Blot
|
||||
quill.insertEmbed(range.index, "tabs", tabsData);
|
||||
quill.setSelection(range.index + 1);
|
||||
};
|
||||
const handleTabsClick = () => {
|
||||
tabsData.value.push({ title: `标签${tabsData.value.length + 1}`, content: "" });
|
||||
activeName.value = `标签${tabsData.value.length + 1}`;
|
||||
};
|
||||
const handleTabsEdit = values => {
|
||||
let index = tabsData.value.findIndex(item => {
|
||||
return (item.title = values);
|
||||
});
|
||||
tabsData.value.splice(index, 1);
|
||||
};
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
});
|
||||
|
||||
defineExpose({ clearEditor });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
|
||||
// 增加编辑器内容区交互性确保删除可用
|
||||
.ql-editor {
|
||||
min-height: 600px; // 确保空编辑器也有点击区域
|
||||
cursor: text !important;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
@@ -1,517 +0,0 @@
|
||||
<template>
|
||||
<!-- 图片上传组件 -->
|
||||
<el-upload
|
||||
:id="uuid"
|
||||
action="#"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:http-request="handleHttpUpload"
|
||||
:before-upload="handleBeforeUpload"
|
||||
class="editor-img-uploader"
|
||||
accept=".jpeg,.jpg,.png,.gif"
|
||||
>
|
||||
<i ref="uploadRef" class="Plus editor-img-uploader"></i>
|
||||
</el-upload>
|
||||
|
||||
<!-- 视频上传组件 -->
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
name="file"
|
||||
ref="uploadFileVideo"
|
||||
id="uploadFileVideo"
|
||||
@change="handleVideoUpload"
|
||||
style="width: 0; height: 0; cursor: pointer; opacity: 0"
|
||||
/>
|
||||
|
||||
<!-- 主富文本编辑器 -->
|
||||
<div class="editor">
|
||||
<QuillEditor
|
||||
id="editorId"
|
||||
ref="myQuillEditor"
|
||||
v-model:content="editorContent"
|
||||
contentType="html"
|
||||
@update:content="onContentChange"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 标签页配置弹窗 -->
|
||||
<div>
|
||||
<el-dialog v-model="outerVisible" title="标签页配置" style="width: 900px; height: 900px">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
editable
|
||||
@edit="handleTabsEdit"
|
||||
@tab-change="handleTabChange"
|
||||
>
|
||||
<el-tab-pane :label="item.title" :name="item.title" v-for="(item, index) in tabsData" :key="index">
|
||||
<QuillEditor
|
||||
id="editorId1"
|
||||
:ref="tabEditors[index]"
|
||||
v-model:content="item.content"
|
||||
contentType="html"
|
||||
:options="options1"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="outerVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleQR"> 确认 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Editor">
|
||||
import { QuillEditor, Quill } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { getCurrentInstance, reactive, ref, toRaw, computed, onMounted, nextTick } from "vue";
|
||||
import { generateUUID } from "@/utils";
|
||||
import { h } from "@/utils/url";
|
||||
import { routerObj } from "./utils.js";
|
||||
import { titleConfig } from "./titleConfig.js";
|
||||
import { uploadVideo, uploadImg } from "@/api/modules/upload";
|
||||
import { ElNotification } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
// 字体配置
|
||||
let fontSizeStyle = Quill.import("attributors/style/size");
|
||||
fontSizeStyle.whitelist = ["12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "30px", "32px"];
|
||||
Quill.register(fontSizeStyle, true);
|
||||
|
||||
// 自定义Blot
|
||||
import ImageBlot from "./quill-image";
|
||||
import Video from "./quill-video";
|
||||
import TabsBlot from "./quill-tabs";
|
||||
Quill.register(Video);
|
||||
Quill.register(ImageBlot);
|
||||
Quill.register(TabsBlot);
|
||||
|
||||
// 基础变量
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emit = defineEmits(["update:content", "handleRichTextContentChange"]);
|
||||
const uuid = ref("id-" + generateUUID());
|
||||
const $router = useRouter();
|
||||
const routerValueName = $router.currentRoute.value.name;
|
||||
const routerName = ref(routerObj[routerValueName]);
|
||||
const uploadFileVideo = ref(null);
|
||||
const outerVisible = ref(false);
|
||||
const imageList = ref([]);
|
||||
const imageListDb = ref([]);
|
||||
const tabsData = ref([]);
|
||||
const activeName = ref(null);
|
||||
const activeEditor = ref("main"); // 跟踪当前活跃编辑器：main=主编辑器，tab-xxx=标签页编辑器
|
||||
const tabEditors = ref([]); // 标签页编辑器ref数组
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
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);
|
||||
}
|
||||
});
|
||||
const myQuillEditor = ref(null);
|
||||
|
||||
// 主编辑器配置（工具栏添加activeEditor切换）
|
||||
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: fontSizeStyle.whitelist }],
|
||||
[{ header: [1, 2, 3, 4, 5, 6, false] }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
["clean"],
|
||||
["link", "image", "video", "tabs"]
|
||||
],
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
activeEditor.value = "main"; // 点击主编辑器图片按钮时切换状态
|
||||
proxy.$refs.uploadRef.click();
|
||||
} else Quill.format("customImage", true);
|
||||
},
|
||||
video: function (value) {
|
||||
if (value) {
|
||||
activeEditor.value = "main"; // 点击主编辑器视频按钮时切换状态
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else Quill.format("customVideo", true);
|
||||
},
|
||||
tabs: function (value) {
|
||||
outerVisible.value = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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 } });
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// 标签页编辑器配置（工具栏添加activeEditor切换）
|
||||
const options1 = reactive({
|
||||
theme: "snow",
|
||||
debug: "warn",
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
["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) {
|
||||
// 点击标签页图片按钮时，切换到当前标签页编辑器
|
||||
const currentIndex = tabsData.value.findIndex(item => item.title === 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);
|
||||
activeEditor.value = `tab-${currentIndex}`;
|
||||
document.querySelector("#uploadFileVideo")?.click();
|
||||
} else Quill.format("customVideo", true);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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 } });
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// 排序函数
|
||||
const sortImageListByNumber = () => {
|
||||
imageListDb.value.sort((a, b) => {
|
||||
const getNumber = fileName => {
|
||||
const match = fileName.match(/-(\d+)$/);
|
||||
return match ? parseInt(match[1], 10) : 0;
|
||||
};
|
||||
const numA = getNumber(a.name);
|
||||
const numB = getNumber(b.name);
|
||||
return numA - numB;
|
||||
});
|
||||
};
|
||||
|
||||
// 上传前校验
|
||||
const handleBeforeUpload = file => {
|
||||
const fileType = file.type;
|
||||
file.customUid = generateUUID();
|
||||
imageListDb.value.push(file);
|
||||
sortImageListByNumber();
|
||||
|
||||
const validTypes = [
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"image/gif",
|
||||
"image/jpg",
|
||||
"image/bmp",
|
||||
"image/webp",
|
||||
"video/mov",
|
||||
"video/ts",
|
||||
"video/mp4",
|
||||
"video/avi"
|
||||
];
|
||||
|
||||
if (validTypes.includes(fileType)) {
|
||||
const isLt = file.size / 1024 / 1024 < props.fileSizeLimit;
|
||||
if (!isLt) {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `上传文件大小不能超过 ${props.fileSizeLimit} MB!`,
|
||||
type: "warning"
|
||||
});
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: `文件格式不正确！`,
|
||||
type: "warning"
|
||||
});
|
||||
imageListDb.value = imageListDb.value.filter(item => item.customUid !== file.customUid);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 图片上传（区分主编辑器和标签页）
|
||||
const handleHttpUpload = async options => {
|
||||
let formData = new FormData();
|
||||
formData.append("image", options.file);
|
||||
imageList.value.push(options.file);
|
||||
console.log();
|
||||
try {
|
||||
const result = await uploadImg(formData, routerName.value, options.file.customUid);
|
||||
if (result?.data?.code === 0) {
|
||||
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 quill;
|
||||
// 区分：主编辑器上传
|
||||
if (activeEditor.value === "main") {
|
||||
const rawEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawEditor.getQuill();
|
||||
}
|
||||
// 标签页编辑器上传
|
||||
else if (activeEditor.value.startsWith("tab-")) {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
const rawEditor = toRaw(tabEditors.value[tabIndex].value);
|
||||
quill = rawEditor.getQuill();
|
||||
}
|
||||
|
||||
if (quill) {
|
||||
imageListDb.value.forEach(item => {
|
||||
const length = quill.getLength() - 1;
|
||||
quill.insertEmbed(length, "customImage", {
|
||||
url: h + item.path,
|
||||
id: item.serverImgId || generateUUID()
|
||||
});
|
||||
quill.setSelection(length + 1);
|
||||
});
|
||||
}
|
||||
|
||||
// 清空上传列表
|
||||
imageList.value = [];
|
||||
imageListDb.value = [];
|
||||
}
|
||||
}
|
||||
} 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();
|
||||
formData.append("video", evt.target.files[0]);
|
||||
|
||||
try {
|
||||
let quill;
|
||||
// 区分：主编辑器上传
|
||||
if (activeEditor.value === "main") {
|
||||
const rawEditor = toRaw(myQuillEditor.value);
|
||||
quill = rawEditor.getQuill();
|
||||
}
|
||||
// 标签页编辑器上传
|
||||
else if (activeEditor.value.startsWith("tab-")) {
|
||||
const tabIndex = parseInt(activeEditor.value.split("-")[1]);
|
||||
const rawEditor = toRaw(tabEditors.value[tabIndex].value);
|
||||
quill = rawEditor.getQuill();
|
||||
}
|
||||
|
||||
if (quill) {
|
||||
const length = quill.selection.savedRange.index;
|
||||
const { data } = await uploadVideo(formData);
|
||||
quill.insertEmbed(length, "customVideo", {
|
||||
url: h + data.path,
|
||||
id: generateUUID()
|
||||
});
|
||||
uploadFileVideo.value.value = ""; // 清空输入
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("视频上传失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 内容变化监听
|
||||
const onContentChange = content => {
|
||||
emit("handleRichTextContentChange", content);
|
||||
emit("update:content", content);
|
||||
const rawMyQuillEditor = toRaw(myQuillEditor.value);
|
||||
if (rawMyQuillEditor) {
|
||||
const quill = rawMyQuillEditor.getQuill();
|
||||
if (content === "") {
|
||||
quill.setText("");
|
||||
editorContent.value = "";
|
||||
quill.enable(true);
|
||||
quill.setSelection(0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 标签页操作：添加/删除标签
|
||||
const handleTabsEdit = (targetName, action) => {
|
||||
if (action === "add") {
|
||||
const newIndex = tabsData.value.length;
|
||||
tabsData.value.push({
|
||||
title: `标签${newIndex + 1}`,
|
||||
content: ""
|
||||
});
|
||||
// 初始化标签页编辑器ref
|
||||
tabEditors.value[newIndex] = ref(null);
|
||||
// 切换到新标签页
|
||||
nextTick(() => {
|
||||
activeName.value = `标签${newIndex + 1}`;
|
||||
activeEditor.value = `tab-${newIndex}`;
|
||||
});
|
||||
} else if (action === "remove") {
|
||||
const index = tabsData.value.findIndex(item => item.title === targetName);
|
||||
tabsData.value.splice(index, 1);
|
||||
// 若删除当前活跃标签页，自动切换
|
||||
if (activeName.value === targetName && tabsData.value.length > 0) {
|
||||
activeName.value = tabsData.value[0].title;
|
||||
activeEditor.value = "tab-0";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 标签页切换时更新活跃编辑器
|
||||
const handleTabChange = tabTitle => {
|
||||
const tabIndex = tabsData.value.findIndex(item => item.title === tabTitle);
|
||||
activeEditor.value = `tab-${tabIndex}`;
|
||||
};
|
||||
|
||||
// 标签页内容插入主编辑器
|
||||
const handleQR = () => {
|
||||
const rawEditor = toRaw(myQuillEditor.value);
|
||||
const quill = rawEditor.getQuill();
|
||||
const range = quill.getSelection(true);
|
||||
quill.insertEmbed(range.index, "tabs", tabsData.value);
|
||||
quill.setSelection(range.index + 1);
|
||||
outerVisible.value = false;
|
||||
};
|
||||
|
||||
// 初始化工具栏标题
|
||||
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) tip.setAttribute("title", item.title);
|
||||
}
|
||||
};
|
||||
|
||||
// 清空编辑器
|
||||
const clearEditor = () => {
|
||||
const rawEditor = toRaw(myQuillEditor.value);
|
||||
if (rawEditor) {
|
||||
const quill = rawEditor.getQuill();
|
||||
quill.setText("");
|
||||
editorContent.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载初始化
|
||||
onMounted(() => {
|
||||
initTitle();
|
||||
activeEditor.value = "main"; // 默认激活主编辑器
|
||||
});
|
||||
|
||||
defineExpose({ clearEditor });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
|
||||
// 增加编辑器内容区交互性确保删除可用
|
||||
.ql-editor {
|
||||
min-height: 600px; // 确保空编辑器也有点击区域
|
||||
cursor: text !important;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
@@ -5,79 +5,370 @@ const BlockEmbed = Quill.import("blots/block/embed");
|
||||
class TabsBlot extends BlockEmbed {
|
||||
static blotName = "tabs";
|
||||
static tagName = "div";
|
||||
static className = "quill-tabs";
|
||||
static className = "m-quill-tabs";
|
||||
|
||||
constructor(domNode) {
|
||||
super(domNode);
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 绑定删除键事件
|
||||
}
|
||||
|
||||
static create(value) {
|
||||
const node = super.create(value);
|
||||
const tabs = value;
|
||||
const tabs = value || [];
|
||||
|
||||
// 主容器样式
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
`
|
||||
);
|
||||
|
||||
// 标签栏
|
||||
const tabList = document.createElement("div");
|
||||
tabList.className = "quill-tab-list";
|
||||
tabList.className = "m-quill-tab-list";
|
||||
tabList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: flex;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
`
|
||||
);
|
||||
|
||||
// 内容区
|
||||
const contentList = document.createElement("div");
|
||||
contentList.className = "quill-tab-content-list";
|
||||
// 生成标签和内容
|
||||
contentList.className = "m-quill-tab-content-list";
|
||||
contentList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 15px;
|
||||
`
|
||||
);
|
||||
|
||||
// 生成标签按钮和内容面板
|
||||
tabs.forEach((tab, index) => {
|
||||
// 标签按钮
|
||||
const btn = document.createElement("button");
|
||||
btn.className = `quill-tab-button ${index === 0 ? "active" : ""}`;
|
||||
btn.className = `m-quill-tab-button`;
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 900;
|
||||
color: #8f9099;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-right: 60px;
|
||||
cursor: pointer;
|
||||
font-size:16px;
|
||||
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.appendChild(btn);
|
||||
|
||||
// 内容面板
|
||||
// 内容面板 - 关键修改：设置为可编辑
|
||||
const panel = document.createElement("div");
|
||||
panel.className = `quill-tab-content ${index === 0 ? "active" : ""}`;
|
||||
panel.className = `m-quill-tab-content`;
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px;
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "false"; // 内容面板可编辑
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 编辑按钮
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "m-quill-tab-edit-btn";
|
||||
editBtn.innerHTML = "编辑";
|
||||
editBtn.setAttribute("data-action", "edit");
|
||||
editBtn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
display:block;
|
||||
`
|
||||
);
|
||||
// display: flex;
|
||||
//align-items: center;
|
||||
// editBtn.onmouseover = () => {
|
||||
// editBtn.style.color = "#007bff";
|
||||
// };
|
||||
// editBtn.onmouseout = () => {
|
||||
// editBtn.style.color = "#606266";
|
||||
// };
|
||||
tabList.appendChild(editBtn);
|
||||
|
||||
// 标签页切换逻辑
|
||||
const scriptTag = document.createElement("script");
|
||||
// 修改 scriptTag.textContent 中的逻辑
|
||||
scriptTag.textContent = `
|
||||
(function() {
|
||||
const container = document.currentScript.parentElement;
|
||||
const isAdmin = window.location.pathname.includes('/admin');
|
||||
const editBtn1 = container.querySelector('.m-quill-tab-edit-btn');
|
||||
|
||||
// 仅在非管理系统（文章网站）隐藏编辑按钮，管理系统保持显示
|
||||
if (!isAdmin && editBtn1) {
|
||||
editBtn1.style.display = 'none'; // 文章网站隐藏按钮
|
||||
} else if (isAdmin && editBtn1) {
|
||||
editBtn1.style.display = 'block'; // 管理系统强制显示按钮
|
||||
}
|
||||
|
||||
// 非管理系统才执行标签切换逻辑（管理系统不执行）
|
||||
if (!isAdmin) {
|
||||
const tabButtons = container.querySelectorAll('.m-quill-tab-button:not([data-action])');
|
||||
const contentPanels = container.querySelectorAll('.m-quill-tab-content');
|
||||
tabButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const index = parseInt(this.dataset.index);
|
||||
tabButtons.forEach((b, i) => {
|
||||
b.setAttribute('style', \`
|
||||
padding: 10px 15px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
font-size:16px;
|
||||
margin-right: 60px;
|
||||
color: #8f9099;
|
||||
border: none;
|
||||
\${i === index ?
|
||||
'color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;' :
|
||||
''
|
||||
}
|
||||
\`);
|
||||
});
|
||||
contentPanels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
`;
|
||||
|
||||
node.appendChild(tabList);
|
||||
node.appendChild(contentList);
|
||||
node.setAttribute("contenteditable", "false"); // 禁止直接编辑容器
|
||||
node.appendChild(scriptTag);
|
||||
node.setAttribute("contenteditable", "false");
|
||||
return node;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// 事件委托，确保动态生成的元素也能触发
|
||||
this.domNode.addEventListener("click", e => {
|
||||
const btn = e.target.closest(".quill-tab-button");
|
||||
if (btn) {
|
||||
if (!this.eventBoundElements) {
|
||||
this.eventBoundElements = new WeakMap();
|
||||
}
|
||||
|
||||
// 移除 eventBoundElements 依赖，直接重新绑定事件（避免弱映射导致的问题）
|
||||
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
|
||||
if (editBtn) {
|
||||
// 先移除旧事件，避免重复绑定
|
||||
editBtn.removeEventListener("click", this.handleEditClick);
|
||||
// 绑定新事件（使用箭头函数确保 this 指向正确）
|
||||
this.handleEditClick = e => {
|
||||
e.stopPropagation();
|
||||
console.log("1232323");
|
||||
this.domNode.dispatchEvent(
|
||||
new CustomEvent("edit-tabs", {
|
||||
bubbles: true,
|
||||
detail: { blot: this }
|
||||
})
|
||||
);
|
||||
};
|
||||
editBtn.addEventListener("click", this.handleEditClick);
|
||||
}
|
||||
|
||||
// 标签切换事件
|
||||
const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
tabButtons.forEach(btn => {
|
||||
if (!this.eventBoundElements.has(btn)) {
|
||||
btn.addEventListener("click", () => {
|
||||
const index = parseInt(btn.dataset.index, 10);
|
||||
this.selectTab(index);
|
||||
});
|
||||
this.eventBoundElements.set(btn, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectTab(index) {
|
||||
const buttons = this.domNode.querySelectorAll(".quill-tab-button");
|
||||
const panels = this.domNode.querySelectorAll(".quill-tab-content");
|
||||
// 增强版删除键处理
|
||||
bindDeleteKeyEvent() {
|
||||
// 阻止从外部删除整个组件
|
||||
this.domNode.addEventListener(
|
||||
"keydown",
|
||||
e => {
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount) return;
|
||||
|
||||
buttons.forEach((btn, i) => btn.classList.toggle("active", i === index));
|
||||
panels.forEach((panel, i) => panel.classList.toggle("active", i === index));
|
||||
const range = selection.getRangeAt(0);
|
||||
const parentBlock = this.domNode;
|
||||
|
||||
// 判断光标是否在组件内部
|
||||
const isInside = parentBlock.contains(range.commonAncestorContainer);
|
||||
|
||||
// 如果光标在组件外部，阻止删除
|
||||
if (!isInside) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否选中了整个组件
|
||||
if (
|
||||
range.startContainer === parentBlock &&
|
||||
range.endContainer === parentBlock &&
|
||||
range.startOffset === 0 &&
|
||||
range.endOffset >= parentBlock.childNodes.length
|
||||
) {
|
||||
e.preventDefault(); // 阻止删除整个组件
|
||||
}
|
||||
}
|
||||
},
|
||||
true
|
||||
); // 使用捕获阶段
|
||||
|
||||
// 标签栏禁止编辑
|
||||
const tabList = this.domNode.querySelector(".m-quill-tab-list");
|
||||
if (tabList) {
|
||||
tabList.querySelectorAll("*").forEach(el => {
|
||||
el.contentEditable = "false";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
selectTab(index) {
|
||||
const buttons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
const panels = this.domNode.querySelectorAll(".m-quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size:16px;
|
||||
margin-right: 60px;
|
||||
color: #8f9099;
|
||||
border-bottom: 3px solid transparent;
|
||||
${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
panels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? "block" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
static value(node) {
|
||||
const tabs = [];
|
||||
node.querySelectorAll(".quill-tab-button").forEach((btn, i) => {
|
||||
const buttons = node.querySelectorAll(".m-quill-tab-button:not([data-action])");
|
||||
const panels = node.querySelectorAll(".m-quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
tabs.push({
|
||||
title: btn.textContent,
|
||||
content: node.querySelectorAll(".quill-tab-content")[i].innerHTML
|
||||
content: panels[i]?.innerHTML || ""
|
||||
});
|
||||
});
|
||||
return { tabs };
|
||||
|
||||
return tabs;
|
||||
}
|
||||
|
||||
update(mutations, context) {
|
||||
super.update(mutations, context);
|
||||
this.bindEvents(); // 重新绑定事件
|
||||
const scriptTag = this.domNode.querySelector("script");
|
||||
if (scriptTag) {
|
||||
const newScript = document.createElement("script");
|
||||
|
||||
newScript.textContent = scriptTag.textContent;
|
||||
scriptTag.parentNode.replaceChild(newScript, scriptTag);
|
||||
}
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 重新绑定删除事件
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return TabsBlot.value(this.domNode);
|
||||
}
|
||||
|
||||
// 更新标签页数据（编辑后更新 DOM）
|
||||
updateContents(tabs) {
|
||||
// 清空原有内容
|
||||
const contentList = this.domNode.querySelector(".m-quill-tab-content-list");
|
||||
const tabList = this.domNode.querySelector(".m-quill-tab-list");
|
||||
// 保留编辑按钮（如果需要）
|
||||
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
|
||||
// 清空标签栏和内容区（保留编辑按钮）
|
||||
Array.from(tabList.children).forEach(child => {
|
||||
if (!child.classList.contains("m-quill-tab-edit-btn")) {
|
||||
child.remove();
|
||||
}
|
||||
});
|
||||
contentList.innerHTML = "";
|
||||
|
||||
// 重新渲染标签页（复用 create 方法中的逻辑）
|
||||
tabs.forEach((tab, index) => {
|
||||
// 重建标签按钮
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "m-quill-tab-button";
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 900;
|
||||
color: #8f9099;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-right: 60px;
|
||||
font-size:16px;
|
||||
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.insertBefore(btn, editBtn); // 插入到编辑按钮前
|
||||
|
||||
// 重建内容面板
|
||||
const panel = document.createElement("div");
|
||||
panel.className = "m-quill-tab-content";
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px;
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "false";
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 重新绑定事件（确保切换功能正常）
|
||||
this.bindEvents();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,74 +10,277 @@ class TabsBlot extends BlockEmbed {
|
||||
constructor(domNode) {
|
||||
super(domNode);
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 绑定删除键事件
|
||||
}
|
||||
|
||||
static create(value) {
|
||||
const node = super.create(value);
|
||||
const tabs = value;
|
||||
const tabs = value || [];
|
||||
|
||||
// 主容器样式
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
`
|
||||
);
|
||||
|
||||
// 标签栏
|
||||
const tabList = document.createElement("div");
|
||||
tabList.className = "quill-tab-list";
|
||||
tabList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: flex;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
`
|
||||
);
|
||||
|
||||
// 内容区
|
||||
const contentList = document.createElement("div");
|
||||
contentList.className = "quill-tab-content-list";
|
||||
// 生成标签和内容
|
||||
contentList.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 15px;
|
||||
`
|
||||
);
|
||||
|
||||
// 生成标签按钮和内容面板
|
||||
tabs.forEach((tab, index) => {
|
||||
// 标签按钮
|
||||
const btn = document.createElement("button");
|
||||
btn.className = `quill-tab-button ${index === 0 ? "active" : ""}`;
|
||||
btn.setAttribute("data-index", index);
|
||||
btn.textContent = tab.title;
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
${index === 0 ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
|
||||
`
|
||||
);
|
||||
tabList.appendChild(btn);
|
||||
|
||||
// 内容面板
|
||||
// 内容面板 - 关键修改：设置为可编辑
|
||||
const panel = document.createElement("div");
|
||||
panel.className = `quill-tab-content ${index === 0 ? "active" : ""}`;
|
||||
panel.setAttribute("data-index", index);
|
||||
panel.innerHTML = tab.content;
|
||||
panel.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: ${index === 0 ? "block" : "none"};
|
||||
min-height: 50px; /* 确保有编辑区域 */
|
||||
`
|
||||
);
|
||||
panel.contentEditable = "true"; // 内容面板可编辑
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 编辑按钮
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "quill-tab-edit-btn";
|
||||
editBtn.innerHTML = "编辑";
|
||||
editBtn.setAttribute("data-action", "edit");
|
||||
editBtn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
`
|
||||
);
|
||||
editBtn.onmouseover = () => {
|
||||
editBtn.style.color = "#007bff";
|
||||
};
|
||||
editBtn.onmouseout = () => {
|
||||
editBtn.style.color = "#606266";
|
||||
};
|
||||
tabList.appendChild(editBtn);
|
||||
// 标签页切换逻辑
|
||||
const scriptTag = document.createElement("script");
|
||||
scriptTag.textContent = `
|
||||
(function() {
|
||||
const container = document.currentScript.parentElement;
|
||||
const tabButtons = container.querySelectorAll('.quill-tab-button:not([data-action])');
|
||||
const contentPanels = container.querySelectorAll('.quill-tab-content');
|
||||
tabButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const index = parseInt(this.dataset.index);
|
||||
tabButtons.forEach((b, i) => {
|
||||
b.setAttribute('style', \`
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
\${i === index ?
|
||||
'color: #007bff; background-color: white; border-bottom: 2px solid #007bff;' :
|
||||
''
|
||||
}
|
||||
\`);
|
||||
});
|
||||
|
||||
contentPanels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
`;
|
||||
|
||||
// 组装结构 - 关键修改：移除contenteditable="false"
|
||||
node.appendChild(tabList);
|
||||
node.appendChild(contentList);
|
||||
node.setAttribute("contenteditable", "false"); // 禁止直接编辑容器
|
||||
node.appendChild(scriptTag);
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// 事件委托，确保动态生成的元素也能触发
|
||||
this.domNode.addEventListener("click", e => {
|
||||
const btn = e.target.closest(".quill-tab-button");
|
||||
if (btn) {
|
||||
if (!this.eventBoundElements) {
|
||||
this.eventBoundElements = new WeakMap();
|
||||
}
|
||||
|
||||
// 编辑按钮事件
|
||||
const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
|
||||
if (editBtn && !this.eventBoundElements.has(editBtn)) {
|
||||
editBtn.addEventListener("click", e => {
|
||||
e.stopPropagation();
|
||||
this.domNode.dispatchEvent(
|
||||
new CustomEvent("edit-tabs", {
|
||||
bubbles: true,
|
||||
detail: { blot: this }
|
||||
})
|
||||
);
|
||||
});
|
||||
this.eventBoundElements.set(editBtn, true);
|
||||
}
|
||||
|
||||
// 标签切换事件
|
||||
const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
tabButtons.forEach(btn => {
|
||||
if (!this.eventBoundElements.has(btn)) {
|
||||
btn.addEventListener("click", () => {
|
||||
const index = parseInt(btn.dataset.index, 10);
|
||||
this.selectTab(index);
|
||||
});
|
||||
this.eventBoundElements.set(btn, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 增强版删除键处理
|
||||
bindDeleteKeyEvent() {
|
||||
// 阻止从外部删除整个组件
|
||||
this.domNode.addEventListener(
|
||||
"keydown",
|
||||
e => {
|
||||
if (e.key === "Backspace" || e.key === "Delete") {
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
const parentBlock = this.domNode;
|
||||
|
||||
// 判断光标是否在组件内部
|
||||
const isInside = parentBlock.contains(range.commonAncestorContainer);
|
||||
|
||||
// 如果光标在组件外部，阻止删除
|
||||
if (!isInside) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否选中了整个组件
|
||||
if (
|
||||
range.startContainer === parentBlock &&
|
||||
range.endContainer === parentBlock &&
|
||||
range.startOffset === 0 &&
|
||||
range.endOffset >= parentBlock.childNodes.length
|
||||
) {
|
||||
e.preventDefault(); // 阻止删除整个组件
|
||||
}
|
||||
}
|
||||
},
|
||||
true
|
||||
); // 使用捕获阶段
|
||||
|
||||
// 标签栏禁止编辑
|
||||
const tabList = this.domNode.querySelector(".quill-tab-list");
|
||||
if (tabList) {
|
||||
tabList.querySelectorAll("*").forEach(el => {
|
||||
el.contentEditable = "false";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
selectTab(index) {
|
||||
const buttons = this.domNode.querySelectorAll(".quill-tab-button");
|
||||
const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
const panels = this.domNode.querySelectorAll(".quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => btn.classList.toggle("active", i === index));
|
||||
panels.forEach((panel, i) => panel.classList.toggle("active", i === index));
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.setAttribute(
|
||||
"style",
|
||||
`
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
panels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? "block" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
static value(node) {
|
||||
const tabs = [];
|
||||
node.querySelectorAll(".quill-tab-button").forEach((btn, i) => {
|
||||
const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
const panels = node.querySelectorAll(".quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
tabs.push({
|
||||
title: btn.textContent,
|
||||
content: node.querySelectorAll(".quill-tab-content")[i].innerHTML
|
||||
content: panels[i].innerHTML
|
||||
});
|
||||
});
|
||||
|
||||
return { tabs };
|
||||
}
|
||||
|
||||
update(mutations, context) {
|
||||
super.update(mutations, context);
|
||||
this.bindEvents(); // 重新绑定事件
|
||||
const scriptTag = this.domNode.querySelector("script");
|
||||
if (scriptTag) {
|
||||
const newScript = document.createElement("script");
|
||||
newScript.textContent = scriptTag.textContent;
|
||||
scriptTag.parentNode.replaceChild(newScript, scriptTag);
|
||||
}
|
||||
this.bindEvents();
|
||||
this.bindDeleteKeyEvent(); // 重新绑定删除事件
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
180
src/components/Editor/quill-tabs222.js
Normal file
180
src/components/Editor/quill-tabs222.js
Normal file
@@ -0,0 +1,180 @@
|
||||
import { Quill } from "@vueup/vue-quill";
|
||||
|
||||
const BlockEmbed = Quill.import("blots/block/embed");
|
||||
|
||||
class TabsBlot extends BlockEmbed {
|
||||
static blotName = "tabs";
|
||||
static tagName = "div";
|
||||
static className = "quill-tabs";
|
||||
|
||||
constructor(domNode) {
|
||||
super(domNode);
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
static create(value) {
|
||||
const tabs = Array.isArray(value) ? value : [];
|
||||
const node = super.create(value);
|
||||
|
||||
// 主容器样式
|
||||
node.setAttribute(
|
||||
"style",
|
||||
`
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
`
|
||||
);
|
||||
|
||||
// 标签栏容器
|
||||
const tabList = document.createElement("div");
|
||||
tabList.className = "quill-tab-list";
|
||||
tabList.style.cssText = `
|
||||
display: flex;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
`;
|
||||
|
||||
// 内容区容器
|
||||
const contentList = document.createElement("div");
|
||||
contentList.className = "quill-tab-content-list";
|
||||
contentList.style.cssText = "padding: 15px;";
|
||||
|
||||
// 生成标签和内容
|
||||
tabs.forEach((tab, index) => {
|
||||
// 标签按钮
|
||||
const btn = document.createElement("button");
|
||||
btn.className = `quill-tab-button ${index === 0 ? "active" : ""}`;
|
||||
btn.dataset.index = index;
|
||||
btn.textContent = tab.title || `标签${index + 1}`;
|
||||
btn.style.cssText = `
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
${index === 0 ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
|
||||
`;
|
||||
tabList.appendChild(btn);
|
||||
|
||||
// 内容面板
|
||||
const panel = document.createElement("div");
|
||||
panel.className = `quill-tab-content ${index === 0 ? "active" : ""}`;
|
||||
panel.dataset.index = index;
|
||||
panel.innerHTML = tab.content || "";
|
||||
panel.style.display = index === 0 ? "block" : "none";
|
||||
contentList.appendChild(panel);
|
||||
});
|
||||
|
||||
// 编辑按钮
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.className = "quill-tab-edit-btn";
|
||||
editBtn.textContent = "编辑";
|
||||
editBtn.dataset.action = "edit";
|
||||
editBtn.style.cssText = `
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
`;
|
||||
editBtn.onmouseover = () => (editBtn.style.color = "#007bff");
|
||||
editBtn.onmouseout = () => (editBtn.style.color = "#606266");
|
||||
tabList.appendChild(editBtn);
|
||||
|
||||
// 组装DOM
|
||||
node.appendChild(tabList);
|
||||
node.appendChild(contentList);
|
||||
node.contentEditable = "false";
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
// 改进的事件绑定方法，避免重复绑定
|
||||
bindEvents() {
|
||||
// 使用WeakMap存储已绑定的元素，避免重复绑定
|
||||
if (!this.eventBoundElements) {
|
||||
this.eventBoundElements = new WeakMap();
|
||||
}
|
||||
|
||||
// 编辑按钮事件
|
||||
const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
|
||||
if (editBtn && !this.eventBoundElements.has(editBtn)) {
|
||||
editBtn.addEventListener("click", e => {
|
||||
e.stopPropagation();
|
||||
this.domNode.dispatchEvent(
|
||||
new CustomEvent("edit-tabs", {
|
||||
bubbles: true,
|
||||
detail: { blot: this }
|
||||
})
|
||||
);
|
||||
});
|
||||
this.eventBoundElements.set(editBtn, true);
|
||||
}
|
||||
|
||||
// 标签切换事件
|
||||
const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
tabButtons.forEach(btn => {
|
||||
if (!this.eventBoundElements.has(btn)) {
|
||||
btn.addEventListener("click", () => {
|
||||
const index = parseInt(btn.dataset.index, 10);
|
||||
this.selectTab(index);
|
||||
});
|
||||
this.eventBoundElements.set(btn, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 移除了有问题的unbindEvents方法
|
||||
|
||||
selectTab(index) {
|
||||
const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
const panels = this.domNode.querySelectorAll(".quill-tab-content");
|
||||
|
||||
if (index < 0 || index >= buttons.length) return;
|
||||
|
||||
// 更新按钮样式
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.style.cssText = `
|
||||
padding: 10px 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
|
||||
`;
|
||||
});
|
||||
|
||||
// 更新内容面板显示
|
||||
panels.forEach((panel, i) => {
|
||||
panel.style.display = i === index ? "block" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
static value(node) {
|
||||
const tabs = [];
|
||||
const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
|
||||
const panels = node.querySelectorAll(".quill-tab-content");
|
||||
|
||||
buttons.forEach((btn, i) => {
|
||||
tabs.push({
|
||||
title: btn.textContent,
|
||||
content: panels[i]?.innerHTML || ""
|
||||
});
|
||||
});
|
||||
|
||||
return tabs;
|
||||
}
|
||||
|
||||
update(mutations, context) {
|
||||
super.update(mutations, context);
|
||||
this.bindEvents();
|
||||
}
|
||||
}
|
||||
|
||||
export default TabsBlot;
|
||||
Reference in New Issue
Block a user