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

// 导入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的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编辑器实例名为 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);