本文详细介绍了如何在quill.js富文本编辑器中实现自动生成页面目录（toc）的功能。通过定制quill的链接和标题模块，解决了默认链接行为不适用于内部跳转以及标题缺少唯一id的问题。文章提供了具体的javascript代码示例，指导用户如何修改链接和标题的行为，从而允许在编辑器内创建可导航的目录结构，显著提升内容的组织性和用户体验。
在现代富文本编辑器中，为长篇文章自动生成页面目录（Table of Contents, TOC）是一项重要功能，它能极大提升内容的导航性和用户体验。Quill.js作为一个高度可定制的富文本编辑器，虽然不直接提供TOC功能，但我们可以通过对其核心模块进行扩展和定制来实现这一目标。实现Quill.js中的TOC功能主要面临两个挑战：一是Quill默认的链接模块会为所有链接添加 target="_blank" 属性，这不适用于页面内部的锚点跳转；二是Quill的标题（Header）元素默认不包含 id 属性，无法作为锚点目标。
定制Quill的链接模块
为了实现页面内部的锚点跳转，我们需要修改Quill链接模块的默认行为，使其在检测到内部锚点链接时，不设置 target="_blank" 属性，或者将其设置为 target="_self"。以下是定制链接模块的JavaScript代码：
// 导入Quill的Link模块
var Link = Quill.import('formats/link');
class MyLink extends Link {
/**
* 创建链接节点。
* 当链接以 '#' 开头时，移除 target 属性，使其在当前页面跳转。
* 否则，保持 target="_blank" 以在新窗口打开。
* @param {string} value 链接值
* @returns {HTMLElement} 链接DOM节点
*/
static create(value) {
let node = super.create(value); // 调用父类的create方法创建链接节点
value = Link.sanitize(value); // 清理链接值
node.setAttribute('href', value); // 设置href属性
if (value.startsWith("#")) {
// 如果是内部锚点链接，移除 target 属性，默认为 _self
node.removeAttribute('target');
} else {
// 否则，设置为在新窗口打开
node.setAttribute("target", "_blank");
}
return node;
}
/**
* 格式化链接。
* 在链接被格式化（例如，用户修改了链接）时，根据链接类型调整 target 属性。
* @param {string} name 格式名称
* @param {string} value 格式值
*/
format(name, value) {
super.format(name, value); // 调用父类的format方法
// 仅处理链接本身的格式化
if (name !== this.statics.blotName || !value) {
return;
}
if (value.startsWith("#")) {
// 如果是内部锚点链接，移除 target 属性
this.domNode.removeAttribute("target");
} else {
// 否则，设置为在新窗口打开
this.domNode.setAttribute("target", "_blank");
}
}
}
// 注册自定义的链接模块
Quill.register(MyLink, true);这段代码通过继承 Quill.import('formats/link') 并重写 create 和 format 方法，实现了对链接行为的精确控制。当链接 href 属性以 # 开头时，我们认为它是一个页面内部锚点，并确保其 target 属性被移除（或设置为 _self），从而实现页内跳转。
定制Quill的标题模块
为了使标题能够作为锚点目标，我们需要为每个标题元素自动生成一个唯一的 id 属性。以下是定制标题模块的JavaScript代码：
// 导入Quill的Header模块
var Header = Quill.import('formats/header');
// 用于存储已生成的ID，确保唯一性
var ids = [];
/**
* 生成一个唯一的随机ID。
* @returns {string} 唯一的ID字符串
*/
function getRandomId() {
let _id = Math.random().toString(16).slice(2, 9);
// 简单检查冲突，实际应用中可能需要更健壮的冲突解决机制
while (ids.includes(_id)) {
_id = Math.random().toString(16).slice(2, 9);
}
ids.push(_id);
return _id;
}
class MyHeader extends Header {
/**
* 构造函数。
* 在创建标题DOM节点时，为其设置一个唯一的ID。
* @param {HTMLElement} domNode 标题DOM节点
*/
constructor(domNode) {
super(domNode);
// 为新创建的标题节点设置一个唯一的ID
domNode.setAttribute('id', getRandomId());
this.cache = {}; // Quill内部使用，保持一致
}
/**
* 静态方法：创建标题节点。
* @returns {HTMLElement} 新的标题DOM节点
*/
static create(value) {
const node = super.create(value);
return node;
}
/**
* 静态方法：获取标题的格式属性。
* @param {HTMLElement} domNode 标题DOM节点
* @returns {object} 包含ID属性的对象
*/
static formats(domNode) {
return {
id: domNode.getAttribute("id")
};
}
}
// 注册自定义的标题模块
// 注意：Quill.register的第二个参数通常是true表示覆盖，
// 但对于formats/header，我们需要指定新的Blot名称或直接覆盖
Quill.register("formats/header", MyHeader);
MyHeader.blotName = "header"; // 确保blotName与Quill内部使用的一致这段代码通过继承 Quill.import('formats/header') 并重写其 constructor 方法，确保每个新创建的标题元素都会被赋予一个唯一的 id。getRandomId 函数负责生成这些唯一ID。formats 静态方法则确保Quill能够正确读取和处理这个 id 属性。
实现TOC的生成逻辑
在完成了链接和标题模块的定制后，下一步是编写逻辑来实际生成和展示TOC。这通常涉及以下步骤：
- 获取编辑器内容：通过 quill.getContents() 或 quill.root.innerHTML 获取编辑器的HTML内容。
- 查找所有标题元素：遍历HTML内容，查找所有的 h1, h2, h3 等标题标签。
- 提取标题信息：对于每个找到的标题，提取其文本内容和之前定制时自动生成的 id 属性。
- 构建TOC列表：根据提取到的标题信息，动态生成一个无序列表（<ul>）或有序列表（<ol>），其中每个列表项包含一个指向对应标题 id 的锚点链接。
- 插入TOC：将生成的TOC列表插入到文章的开头或指定位置。
示例代码片段（概念性，非完整实现）
// 假设Quill编辑器实例名为 quill
function generateTableOfContents(quill) {
const editorContent = quill.root.innerHTML;
const parser = new DOMParser();
const doc = parser.parseFromString(editorContent, 'text/html');
const headers = doc.querySelectorAll('h1, h2, h3, h4, h5, h6');
let tocHtml = '<ul>';
headers.forEach(header => {
const id = header.id;
const text = header.textContent;
const tagName = header.tagName.toLowerCase(); // h1, h2, etc.
const level = parseInt(tagName.replace('h', '')); // 1, 2, etc.
// 根据标题级别添加缩进或样式
const paddingLeft = (level - 1) * 20; // 假设每个级别缩进20px
tocHtml += `<li style="padding-left: ${paddingLeft}px;"><a href="#${id}">${text}</a></li>`;
});
tocHtml += '</ul>';
// 将生成的TOC插入到页面中某个TOC容器元素
const tocContainer = document.getElementById('toc-container');
if (tocContainer) {
tocContainer.innerHTML = tocHtml;
}
}
// 在Quill内容加载或更新后调用
// quill.on('text-change', () => {
// generateTableOfContents(quill);
// });
// 或者在需要时手动调用
// generateTableOfContents(quill);注意事项与总结
- 唯一ID的健壮性： getRandomId 函数在生产环境中可能需要更健壮的唯一ID生成策略，例如结合时间戳、用户ID或UUID库，以避免极小概率的ID冲突。
- TOC的动态更新：如果文章内容在编辑器中实时变动，TOC也需要实时更新。这可以通过监听Quill的 text-change 事件并在事件触发时重新生成TOC来实现。
- TOC的样式：生成的TOC列表的样式（如缩进、字体大小、颜色等）需要通过CSS进行美化，以符合整体页面设计。
- 标题级别处理：在生成TOC时，可以根据标题的级别（H1、H2等）来创建嵌套的列表结构，以更好地反映文章的层次。
- 性能考量：对于非常长的文章，频繁地解析HTML和生成TOC可能会影响性能。可以考虑在用户停止输入一段时间后（例如使用防抖函数）再更新TOC。
通过上述对Quill链接和标题模块的定制，我们成功克服了默认行为的限制，为在Quill.js编辑器中实现自动生成页面目录奠定了基础。结合动态生成TOC的逻辑，可以为用户提供一个功能完善、导航友好的富文本编辑体验。
