Quill.js 富文本编辑器：通过自定义模块实现页面内目录导航 (TOC)

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

class MyLink extends Link {
    /**
     * 创建链接节点时的处理逻辑。
     * @param {string} value - 链接的值 (href)。
     * @returns {HTMLElement} - 创建的链接 DOM 节点。
     */
    static create(value) {
        let node = Link.create(value);
        value = Link.sanitize(value); // 清理链接值
        node.setAttribute('href', value);

        // 如果链接以 '#' 开头，则移除 target 属性，实现页面内跳转
        if (value.startsWith("#")) {
            node.removeAttribute('target');
        } else {
            // 否则，保持 target="_blank"
            node.setAttribute("target", "_blank");
        }
        return node;
    }

    /**
     * 格式化链接时的处理逻辑。
     * @param {string} name - 格式名称。
     * @param {string} value - 格式值。
     */
    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, true); // 第二个参数为 true 表示覆盖默认模块

var Header = Quill.import('formats/header');
var ids = []; // 用于存储已生成的ID，确保唯一性

/**
 * 生成一个简单的随机ID。
 * 实际应用中可能需要更健壮的ID生成策略。
 * @returns {string} - 唯一的ID字符串。
 */
function getRandomId() {
    let _id = Math.random().toString(16).slice(2, 9);
    // 简单检查冲突，实际应用中可能需要更复杂的循环或UUID库
    while(ids.includes(_id)) {
        _id = Math.random().toString(16).slice(2, 9);
    }
    ids.push(_id);
    return _id;
}

class MyHeader extends Header {
    /**
     * 构造函数在标题 DOM 节点被创建并附加到文档时调用。
     * @param {HTMLElement} domNode - 标题的 DOM 节点。
     */
    constructor(domNode) {
        super(domNode);
        // 为标题节点设置唯一的ID
        domNode.setAttribute('id', getRandomId());
        this.cache = {}; // Quill 内部使用，保持一致
    }

    /**
     * 静态方法 create() 用于创建新的 Blot 实例。
     * 这里我们保持与父类一致，因为ID的设置主要在 constructor 中处理。
     * @returns {HTMLElement} - 创建的标题 DOM 节点。
     */
    static create() {
        const node = super.create();
        return node;
    }

    /**
     * 静态方法 formats() 用于获取 Blot 的格式属性。
     * 我们添加 id 属性以便于后续获取。
     * @param {HTMLElement} domNode - 标题的 DOM 节点。
     * @returns {object} - 包含 id 属性的对象。
     */
    static formats(domNode) {
        let formats = super.formats(domNode);
        formats.id = domNode.getAttribute("id");
        return formats;
    }
}

// 注册自定义的标题模块
Quill.register("formats/header", MyHeader, true);
// 确保 blotName 正确，Quill 内部使用
MyHeader.blotName = "header";

// 假设 quill 实例已经初始化
function generateTableOfContents(quill) {
    const editorContent = quill.root; // 获取编辑器内容的 DOM 元素
    const headers = editorContent.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]');

    if (headers.length === 0) {
        return ''; // 没有标题，不生成目录
    }

    let tocHtml = '<ul>';
    let currentLevel = 0; // 跟踪当前标题级别

    headers.forEach(header => {
        const level = parseInt(header.tagName.substring(1)); // 获取标题级别 (h1 -> 1, h2 -> 2)
        const id = header.getAttribute('id');
        const text = header.textContent;

        if (level > currentLevel) {
            // 新的子级别，开始新的无序列表
            for (let i = 0; i < (level - currentLevel); i++) {
                tocHtml += '<ul>';
            }
        } else if (level < currentLevel) {
            // 返回上级，关闭多余的无序列表
            for (let i = 0; i < (currentLevel - level); i++) {
                tocHtml += '</ul>';
            }
        }

        tocHtml += `<li><a href="#${id}">${text}</a></li>`;
        currentLevel = level;
    });

    // 关闭所有未闭合的无序列表
    for (let i = 0; i < currentLevel; i++) {
        tocHtml += '</ul>';
    }

    return tocHtml;
}

// 在页面加载或编辑器内容更新后调用
// const tocContainer = document.getElementById('toc-container');
// if (tocContainer) {
//     tocContainer.innerHTML = generateTableOfContents(quill);
// }