使用Quill.js实现动态目录（TOC）生成教程

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;
        }

        // 在格式化时也应用相同的逻辑
        if (value.startsWith("#")) {
            this.domNode.removeAttribute("target");
        } else {
            this.domNode.setAttribute("target", "_blank");
        }
    }
}

// 注册定制后的链接模块
Quill.register(MyLink);

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

function getRandomId(domNode) {
    let _id = Math.random().toString(16).slice(2, 9); // 生成一个随机的短字符串作为ID
    // 可以在这里添加循环检查ids数组，确保生成的ID是唯一的，避免冲突
    // 例如：while (ids.includes(_id)) { _id = Math.random().toString(16).slice(2, 9); }
    ids.push(_id);
    return _id;
}

var Header = Quill.import('formats/header');

class MyHeader extends Header {
    constructor(domNode) {
        super(domNode);
        // 在标题DOM节点创建时，为其设置一个唯一的ID
        domNode.setAttribute('id', getRandomId(domNode));
        this.cache = {}; // 可用于存储其他自定义属性
    }

    static create(value) {
        // 调用父类的create方法创建DOM节点
        const node = super.create(value);
        return node;
    }

    static formats(domNode) {
        // 允许Quill获取自定义的id属性
        return {
            id: domNode.getAttribute("id")
        };
    }
}

// 注册定制后的标题模块
Quill.register("formats/header", MyHeader);
MyHeader.blotName = "header"; // 确保blotName正确设置

function generateTableOfContents(quillEditorInstance, tocContainerId) {
    const editorContent = quillEditorInstance.root; // 获取编辑器的DOM根元素
    const headers = editorContent.querySelectorAll('h1, h2, h3, h4, h5, h6'); // 选择所有标题标签

    let tocHtml = '<ul>';
    headers.forEach(header => {
        const id = header.getAttribute('id');
        const text = header.innerText;
        const tagName = header.tagName.toLowerCase(); // 获取标题标签名，如h1, h2

        // 可以根据标签名添加缩进或样式，例如：
        let className = `toc-level-${tagName.replace('h', '')}`;
        tocHtml += `<li class="${className}"><a href="#${id}">${text}</a></li>`;
    });
    tocHtml += '</ul>';

    const tocContainer = document.getElementById(tocContainerId);
    if (tocContainer) {
        tocContainer.innerHTML = tocHtml;
    }
}

// 示例用法：
// const quill = new Quill('#editor', { /* options */ });
// quill.on('text-change', () => {
//     generateTableOfContents(quill, 'table-of-contents-container');
// });
// 首次加载时也生成一次
// generateTableOfContents(quill, 'table-of-contents-container');

<div id="table-of-contents-container">
    <!-- 动态生成的目录将插入到这里 -->
</div>
<div id="editor">
    <!-- Quill 编辑器将在此处初始化 -->
</div>