Quill.js富文本编辑器中实现自动生成目录（TOC）的教程

心靈之曲

发布： 2025-10-17 12:25:01

原创

877人浏览过

Quill.js富文本编辑器中实现自动生成目录（TOC）的教程

在处理长篇内容时，一个结构清晰、易于导航的目录（table of contents, toc）对于提升用户体验至关重要。quill.js作为一款强大的富文本编辑器，其高度可定制性允许我们扩展其功能以实现自动生成目录。然而，quill默认并不直接支持这一功能，主要存在两个挑战：一是其链接模块默认会将所有链接设置为在新标签页打开（target="_blank"），这不适用于页面内的锚点跳转；二是其标题标签（如

,

等）默认不包含唯一的id属性，而id是创建锚点链接的必要条件。

本教程将详细介绍如何通过定制Quill的链接模块和标题模块来克服这些限制，为自动生成目录奠定基础。

一、自定义链接模块以支持页面内锚点跳转

Quill的默认链接模块会将所有链接添加target="_blank"属性，导致点击目录链接时会打开新页面，而非在当前页面内跳转到指定位置。为了解决这个问题，我们需要自定义链接模块，使其能够识别并正确处理以#开头的页面内锚点链接，即移除其target="_blank"属性。

以下是自定义链接模块的代码实现：

        var Link = Quill.import('formats/link');

        class MyLink extends Link {
            static create(value) {
                let node = Link.create(value);
                value = Link.sanitize(value); // 清理链接值
                node.setAttribute('href', value);
                // 如果链接以 '#' 开头，则移除 target 属性，实现页面内跳转
                if (value.startsWith("#")) {
                    node.removeAttribute('target');
                } else {
                    // 否则，保持默认行为，在新标签页打开
                    node.setAttribute("target", "_blank");
                }
                return node;
            }

            format(name, value) {
                super.format(name, value);

                if (name !== this.statics.blotName || !value) {
                    return;
                }

                // 在格式化时也检查链接，确保 target 属性的正确性
                if (value.startsWith("#")) {
                    this.domNode.removeAttribute("target");
                } else {
                    this.domNode.setAttribute("target", "_blank");
                }
            }
        }

        Quill.register(MyLink);

登录后复制

在这段代码中，我们创建了一个名为MyLink的新类，继承自Quill的formats/link。我们重写了create和format方法，在其中增加了对链接值（value）的判断。如果链接以#开头，则表示这是一个页面内锚点链接，我们通过node.removeAttribute('target')移除了target属性。否则，链接将保持其默认的target="_blank"行为。

二、自定义标题模块以自动生成唯一ID

创建页面内锚点链接的另一个关键是确保每个标题标签都有一个唯一的id属性。Quill的标题模块默认不为标题标签分配id。因此，我们需要自定义标题模块，使其在创建或渲染标题时自动为其分配一个唯一的id。

以下是自定义标题模块的代码实现：

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

        var Header = Quill.import('formats/header'); // 引入 Quill 的 Header 格式

        var ids = []; // 用于存储已生成的 ID，以确保唯一性

        function getRandomId() {
            let _id;
            do {
                _id = 'quill-header-' + Math.random().toString(36).slice(2, 9); // 生成一个随机 ID
            } while (ids.includes(_id)); // 确保 ID 唯一
            ids.push(_id);
            return _id;
        }

        class MyHeader extends Header {

            constructor(domNode) {
                super(domNode);
                // 在构造函数中为 DOM 节点设置唯一的 ID
                if (!domNode.getAttribute('id')) { // 避免重复设置
                    domNode.setAttribute('id', getRandomId());
                }
                this.cache = {};
            }

            static create(value) {
                const node = super.create(value); // 调用父类的 create 方法创建节点
                // 在创建时也确保 ID 的设置
                if (!node.getAttribute('id')) {
                    node.setAttribute('id', getRandomId());
                }
                return node;
            }

            static formats(domNode) {
                // 返回当前节点的 id 属性
                return {
                    id: domNode.getAttribute("id")
                };
            }
        }

        Quill.register("formats/header", MyHeader);
        MyHeader.blotName = "header"; // 确保 blotName 正确设置

登录后复制

在这段代码中，我们创建了一个MyHeader类，继承自Quill的formats/header。我们引入了一个辅助函数getRandomId()来生成形如quill-header-xxxxxxx的唯一随机ID，并维护一个ids数组来确保生成的ID不重复。

在MyHeader的constructor中，我们检查当前标题DOM节点是否已有id，如果没有，则为其设置一个新生成的唯一ID。
static create(value)方法在Quill创建新的标题节点时被调用，我们在此处也确保新创建的节点拥有唯一的ID。
static formats(domNode)方法用于获取当前节点的格式信息，我们让它返回标题的id属性，以便Quill内部或其他模块可以访问。

三、生成目录列表的后续步骤

完成了上述链接和标题模块的定制后，Quill编辑器中的所有标题标签将自动拥有唯一的id属性，并且我们自定义的链接模块能够正确处理页面内锚点。然而，这仅仅是创建自动目录的基础。要真正生成一个可点击的目录列表，还需要额外的JavaScript逻辑来完成以下步骤：

**遍历编辑器内容**：在内容加载完成后，或者每次内容更新时，通过Quill实例的API（如quill.root.querySelectorAll('h1, h2, h3')）来获取编辑器中所有的标题标签。
**提取信息**：对于每个标题标签，提取其文本内容和之前自动生成的id属性。
**构建目录结构**：根据提取到的标题信息，动态创建一个HTML列表（通常是
**插入目录**：将生成的目录列表插入到文章的指定位置，例如文章开头或侧边栏。

这些后续步骤通常需要结合具体的应用场景和前端框架（如Vue, React, Angular或原生JS）来实现。核心思想是利用Quill定制化后提供的标准化HTML结构来动态构建导航。

总结

通过定制Quill.js的链接（Link）模块和标题（Header）模块，我们成功解决了在富文本编辑器中实现自动生成目录（TOC）的两大核心障碍：页面内锚点链接的正确处理和标题标签唯一ID的自动分配。这些定制为后续通过JavaScript动态解析编辑器内容并生成可点击的目录列表奠定了坚实的基础。Quill.js的强大之处在于其高度的模块化和可扩展性，使得开发者能够根据特定需求灵活地增强其功能，从而创造出更加专业和用户友好的编辑体验。

以上就是Quill.js富文本编辑器中实现自动生成目录（TOC）的教程的详细内容，更多请关注php中文网其它相关文章！