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

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

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

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

@@ -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();
const index = parseInt(btn.dataset.index, 10);
this.selectTab(index);
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();
}
}