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

feat: 🚀 tabs增加滚动条

Browse Source
This commit is contained in:
yangchunlong
2025-07-28 10:03:07 +08:00
parent b3bffac35e
commit 1a97f75546
6 changed files with 773 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -76,6 +76,7 @@
@keydown.backspace.stop
v-else
v-model="item.title"
max-length=""
:ref="el => (editInputRefs[index] = el)"
size="small"
class="title-input"
@@ -113,7 +114,7 @@ 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 { h } from "@/utils/url";
import { routerObj } from "./utils.js";
import { titleConfig } from "./titleConfig.js";
import { uploadVideo, uploadImg } from "@/api/modules/upload";
@@ -307,7 +308,7 @@ const handleHttpUpload = async options => {
imageListDb.value.forEach(item => {
const length = quill.getLength() - 1;
quill.insertEmbed(length, "customImage", {
url: h + item.path,
url: item.path,
id: item.serverImgId || generateUUID()
});
quill.setSelection(length + 1);
@@ -346,7 +347,7 @@ const handleVideoUpload = async evt => {
let length = quill.selection.savedRange.index;
const { data } = await uploadVideo(formData);
quill.insertEmbed(length, "customVideo", {
url: h + data.path,
url: data.path,
id: generateUUID()
});
uploadFileVideo.value.value = "";
@@ -459,6 +460,7 @@ const handleQR = () => {
return useMsg("error", "标签页内容为空 !");
}
const range = quill.getSelection(true);
// 判断是否是编辑已有标签页（通过 currentEditingTabsRef 是否有值）
if (currentEditingTabsRef.value) {
// 1. 编辑模式：更新原有标签页组件
@@ -470,7 +472,10 @@ const handleQR = () => {
} else {
// 2. 新增模式：插入新的标签页组件
quill.insertEmbed(range.index, "tabs", tabsData.value);
// 关键：在标签页前方插入一个空段落（确保顶部有空间）
// quill.insertText(range.index, "\n"); // 插入换行
quill.setSelection(range.index + 1);
quill.insertText(range.index, "\n"); // 插入换行
}
// 关闭弹窗并清空临时数据
setTabsInfo();

297
src/components/Editor/quill-tabs.js
View File

@@ -28,7 +28,38 @@ class TabsBlot extends BlockEmbed {
`
);
// 标签栏
// 标签栏滚动容器 - 优化高度计算
const tabScrollContainer = document.createElement("div");
tabScrollContainer.className = "m-quill-tab-scroll-container";
tabScrollContainer.setAttribute(
"style",
`
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
overflow-y: hidden;
height: auto;
`
);
// height: auto; /* 自动高度 */
// Chrome, Safari 隐藏滚动条
tabScrollContainer.style.overflow = "auto";
tabScrollContainer.style.webkitOverflowScrolling = "touch";
tabScrollContainer.style.scrollbarWidth = "none";
tabScrollContainer.style.msOverflowStyle = "none";
// // 关键：隐藏滚动条但保留功能
// tabScrollContainer.innerHTML = `
// <style>
// .m-quill-tab-scroll-container::-webkit-scrollbar {
// display: none; /* Chrome, Safari 隐藏滚动条 */
// }
// </style>
// `;
// 标签栏 - 保持原有样式不变
const tabList = document.createElement("div");
tabList.className = "m-quill-tab-list";
tabList.setAttribute(
@@ -36,10 +67,54 @@ class TabsBlot extends BlockEmbed {
`
display: flex;
border-bottom: 1px solid #dddddd;
min-width: max-content; /* 确保内容撑开容器 */
`
);
// 内容区
// 生成标签按钮 - 优化内边距计算
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",
`
font-weight: 900;
color: #8f9099;
cursor: pointer;
background: transparent;
border: none;
margin-right: 5px; /* 增大间距 */
cursor: pointer;
font-size:16px;
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`
);
tabList.appendChild(btn);
});
// 编辑按钮 - 保持原有样式不变
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;
width:50px;
background: transparent;
border: none;
display:block;
`
);
tabList.appendChild(editBtn);
// 内容区 - 保持原有样式不变
const contentList = document.createElement("div");
contentList.className = "m-quill-tab-content-list";
contentList.setAttribute(
@@ -49,31 +124,8 @@ class TabsBlot extends BlockEmbed {
`
);
// 生成标签按钮和内容面板
// 生成内容面板 - 保持原有样式不变
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;
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 = `m-quill-tab-content`;
panel.setAttribute("data-index", index);
@@ -85,88 +137,61 @@ class TabsBlot extends BlockEmbed {
min-height: 50px;
`
);
panel.contentEditable = "false"; // 内容面板可编辑
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);
// 组装结构
tabScrollContainer.appendChild(tabList);
node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
node.appendChild(contentList); // 内容区
// 标签页切换逻辑
// 标签页切换逻辑 - 保持原有逻辑不变
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';
});
(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', \`
font-weight: 900;
cursor: pointer;
background: transparent;
font-size:16px;
margin-right: 5px;
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.appendChild(scriptTag);
node.setAttribute("contenteditable", "false");
return node;
@@ -177,15 +202,12 @@ class TabsBlot extends BlockEmbed {
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,
@@ -196,7 +218,7 @@ class TabsBlot extends BlockEmbed {
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)) {
@@ -209,9 +231,8 @@ class TabsBlot extends BlockEmbed {
});
}
// 增强版删除键处理
// 增强版删除键处理 - 保持原有逻辑不变
bindDeleteKeyEvent() {
// 阻止从外部删除整个组件
this.domNode.addEventListener(
"keydown",
e => {
@@ -222,30 +243,26 @@ class TabsBlot extends BlockEmbed {
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(); // 阻止删除整个组件
e.preventDefault();
}
}
},
true
); // 使用捕获阶段
);
// 标签栏禁止编辑
const tabList = this.domNode.querySelector(".m-quill-tab-list");
if (tabList) {
tabList.querySelectorAll("*").forEach(el => {
@@ -258,17 +275,18 @@ class TabsBlot extends BlockEmbed {
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;
margin-right: 5px;
color: #8f9099;
border-bottom: 3px solid transparent;
${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
@@ -279,6 +297,17 @@ class TabsBlot extends BlockEmbed {
panels.forEach((panel, i) => {
panel.style.display = i === index ? "block" : "none";
});
// 滚动到当前选中的标签
const scrollContainer = this.domNode.querySelector(".m-quill-tab-scroll-container");
const activeBtn = buttons[index];
if (scrollContainer && activeBtn) {
activeBtn.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center"
});
}
}
static value(node) {
@@ -301,26 +330,23 @@ class TabsBlot extends BlockEmbed {
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(); // 重新绑定删除事件
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();
@@ -328,9 +354,7 @@ class TabsBlot extends BlockEmbed {
});
contentList.innerHTML = "";
// 重新渲染标签页（复用 create 方法中的逻辑）
tabs.forEach((tab, index) => {
// 重建标签按钮
const btn = document.createElement("button");
btn.className = "m-quill-tab-button";
btn.setAttribute("data-index", index);
@@ -338,20 +362,18 @@ class TabsBlot extends BlockEmbed {
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;" : ""}
`
font-weight: 900;
color: #8f9099;
cursor: pointer;
background: transparent;
border: none;
margin-right: 5px;
font-size:16px;
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`
);
tabList.insertBefore(btn, editBtn); // 插入到编辑按钮前
tabList.insertBefore(btn, editBtn);
// 重建内容面板
const panel = document.createElement("div");
panel.className = "m-quill-tab-content";
panel.setAttribute("data-index", index);
@@ -359,15 +381,14 @@ class TabsBlot extends BlockEmbed {
panel.setAttribute(
"style",
`
display: ${index === 0 ? "block" : "none"};
min-height: 50px;
`
display: ${index === 0 ? "block" : "none"};
min-height: 50px;
`
);
panel.contentEditable = "false";
contentList.appendChild(panel);
});
// 重新绑定事件（确保切换功能正常）
this.bindEvents();
}
}

335
src/components/Editor/quill-tabs1.js
View File

@@ -5,7 +5,7 @@ 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);
@@ -23,27 +23,100 @@ class TabsBlot extends BlockEmbed {
`
margin: 15px 0;
overflow: hidden;
border: 1px solid #dddddd;
border-radius: 4px;
position: relative;
`
);
// 标签栏
// 标签栏滚动容器 - 添加隐藏滚动条样式
const tabScrollContainer = document.createElement("div");
tabScrollContainer.className = "m-quill-tab-scroll-container";
tabScrollContainer.setAttribute(
"style",
`
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* 增强移动端滚动体验 */
scrollbar-width: none; /* Firefox 隐藏滚动条 */
-ms-overflow-style: none; /* IE 10+ 隐藏滚动条 */
`
);
// Chrome, Safari 隐藏滚动条
tabScrollContainer.style.overflow = "auto";
tabScrollContainer.style.webkitOverflowScrolling = "touch";
tabScrollContainer.style.scrollbarWidth = "none";
tabScrollContainer.style.msOverflowStyle = "none";
// 关键：隐藏滚动条但保留功能
tabScrollContainer.innerHTML = `
<style>
.m-quill-tab-scroll-container::-webkit-scrollbar {
display: none; /* Chrome, Safari 隐藏滚动条 */
}
</style>
`;
// 标签栏 - 保持原有样式不变
const tabList = document.createElement("div");
tabList.className = "quill-tab-list";
tabList.className = "m-quill-tab-list";
tabList.setAttribute(
"style",
`
display: flex;
background-color: #f8f9fa;
border-bottom: 1px solid #dddddd;
min-width: max-content; /* 确保内容撑开容器 */
`
);
// 内容区
// 生成标签按钮 - 保持原有样式不变
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: 1%;
font-weight: 900;
color: #8f9099;
cursor: pointer;
background: transparent;
border: none;
margin-right: 1%;
cursor: pointer;
font-size:16px;
${index === 0 ? "color: #1f2635; border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`
);
tabList.appendChild(btn);
});
// 编辑按钮 - 保持原有样式不变
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;
width:50px;
background: transparent;
border: none;
display:block;
`
);
tabList.appendChild(editBtn);
// 内容区 - 保持原有样式不变
const contentList = document.createElement("div");
contentList.className = "quill-tab-content-list";
contentList.className = "m-quill-tab-content-list";
contentList.setAttribute(
"style",
`
@@ -51,106 +124,77 @@ class TabsBlot extends BlockEmbed {
`
);
// 生成标签按钮和内容面板
// 生成内容面板 - 保持原有样式不变
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.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; /* 确保有编辑区域 */
min-height: 50px;
`
);
panel.contentEditable = "true"; // 内容面板可编辑
panel.contentEditable = "false";
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);
// 标签页切换逻辑
// 组装结构
tabScrollContainer.appendChild(tabList);
node.appendChild(tabScrollContainer); // 滚动容器添加到主节点
node.appendChild(contentList); // 内容区
// 标签页切换逻辑 - 保持原有逻辑不变
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';
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: 1%;
font-weight: 900;
cursor: pointer;
background: transparent;
font-size:16px;
margin-right: 1%;
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';
});
});
});
});
}
})();
`;
// 组装结构 - 关键修改：移除contenteditable="false"
node.appendChild(tabList);
node.appendChild(contentList);
node.appendChild(scriptTag);
node.setAttribute("contenteditable", "false");
return node;
}
@@ -159,10 +203,11 @@ class TabsBlot extends BlockEmbed {
this.eventBoundElements = new WeakMap();
}
// 编辑按钮事件
const editBtn = this.domNode.querySelector(".quill-tab-edit-btn");
if (editBtn && !this.eventBoundElements.has(editBtn)) {
editBtn.addEventListener("click", e => {
// 编辑按钮事件 - 保持原有逻辑不变
const editBtn = this.domNode.querySelector(".m-quill-tab-edit-btn");
if (editBtn) {
editBtn.removeEventListener("click", this.handleEditClick);
this.handleEditClick = e => {
e.stopPropagation();
this.domNode.dispatchEvent(
new CustomEvent("edit-tabs", {
@@ -170,12 +215,12 @@ class TabsBlot extends BlockEmbed {
detail: { blot: this }
})
);
});
this.eventBoundElements.set(editBtn, true);
};
editBtn.addEventListener("click", this.handleEditClick);
}
// 标签切换事件
const tabButtons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
// 标签切换事件 - 保持原有逻辑不变
const tabButtons = this.domNode.querySelectorAll(".m-quill-tab-button:not([data-action])");
tabButtons.forEach(btn => {
if (!this.eventBoundElements.has(btn)) {
btn.addEventListener("click", () => {
@@ -187,9 +232,8 @@ class TabsBlot extends BlockEmbed {
});
}
// 增强版删除键处理
// 增强版删除键处理 - 保持原有逻辑不变
bindDeleteKeyEvent() {
// 阻止从外部删除整个组件
this.domNode.addEventListener(
"keydown",
e => {
@@ -200,31 +244,27 @@ class TabsBlot extends BlockEmbed {
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(); // 阻止删除整个组件
e.preventDefault();
}
}
},
true
); // 使用捕获阶段
);
// 标签栏禁止编辑
const tabList = this.domNode.querySelector(".quill-tab-list");
const tabList = this.domNode.querySelector(".m-quill-tab-list");
if (tabList) {
tabList.querySelectorAll("*").forEach(el => {
el.contentEditable = "false";
@@ -233,20 +273,24 @@ class TabsBlot extends BlockEmbed {
}
selectTab(index) {
const buttons = this.domNode.querySelectorAll(".quill-tab-button:not([data-action])");
const panels = this.domNode.querySelectorAll(".quill-tab-content");
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: 500;
padding: 1%;
font-weight: 900;
cursor: pointer;
background: transparent;
border: none;
transition: background-color 0.2s;
${i === index ? "color: #007bff; background-color: white; border-bottom: 2px solid #007bff;" : ""}
font-size:16px;
margin-right: 1%;
color: #8f9099;
border-bottom: 3px solid transparent;
${i === index ? "color: #1f2635;border-bottom: 3px solid #537CD8;font-size:16px;" : ""}
`
);
});
@@ -254,21 +298,32 @@ class TabsBlot extends BlockEmbed {
panels.forEach((panel, i) => {
panel.style.display = i === index ? "block" : "none";
});
// 滚动到当前选中的标签
const scrollContainer = this.domNode.querySelector(".m-quill-tab-scroll-container");
const activeBtn = buttons[index];
if (scrollContainer && activeBtn) {
activeBtn.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center"
});
}
}
static value(node) {
const tabs = [];
const buttons = node.querySelectorAll(".quill-tab-button:not([data-action])");
const panels = node.querySelectorAll(".quill-tab-content");
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: panels[i].innerHTML
content: panels[i]?.innerHTML || ""
});
});
return { tabs };
return tabs;
}
update(mutations, context) {
@@ -280,7 +335,63 @@ class TabsBlot extends BlockEmbed {
scriptTag.parentNode.replaceChild(newScript, scriptTag);
}
this.bindEvents();
this.bindDeleteKeyEvent(); // 重新绑定删除事件
this.bindDeleteKeyEvent();
}
getValue() {
return TabsBlot.value(this.domNode);
}
// 更新标签页数据 - 保持原有逻辑不变
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 = "";
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: 1%;
font-weight: 900;
color: #8f9099;
cursor: pointer;
background: transparent;
border: none;
margin-right: 1%;
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();
}
}

180
src/components/Editor/quill-tabs222.js
View File

@@ -1,180 +0,0 @@
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;

14
src/components/Editor/quill-video.js
View File

@@ -14,8 +14,16 @@ class Video extends BlockEmbed {
node.setAttribute("webkit-playsinline", "true");
node.setAttribute("type", "video/mp4");
// poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
node.setAttribute("poster", value.poster);
// console.log(value.url, "= value.poster=");
// node.setAttribute("poster", this.sanitize(value.url));
node.setAttribute("src", this.sanitize(value.url));
node.setAttribute(
"style",
`
width: 600px;
height: 300px;
`
);
return node;
}
@@ -35,8 +43,8 @@ class Video extends BlockEmbed {
static value(domNode) {
// 设置自定义的属性值
return {
url: domNode.getAttribute("src"),
poster: domNode.getAttribute("poster")
url: domNode.getAttribute("src")
// poster: domNode.getAttribute("src")
};
}