如何使用 quill js 创建目录

Question

有没有办法在 quilljs 中自动将标题标签列为目录（TOC）？我搜索了但找不到任何有用的东西。

可以使用以下代码将 id 添加到标题标签，但如何创建指向它们的链接？

let Header = Quill.import('formats/header');
Header.create = function(value) {
let header = document.createElement('h1');
header.id = 'some-unique-id';
  return header;
};

Answer 1

经过大量文档阅读和努力，我编写了简单、直接且未经优化的 JavaScript 代码，以从 Quill 编辑器自动创建目录 (TOC)。 要点是，实现这一点需要两件事：

• 具有默认行为的链接，因为 Quill 链接模块具有

  target="_blank"

  属性。所以需要修改为具有

  target="_self"

  属性才能保留在页面中。
• 标题标签没有

  id

  属性来创建锚链接。因此 Header 模块也需要一些定制。

感谢 Quill，它的可定制性非常强，这些要求都可以实现。

这里是Link模块的定制：

            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);
                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 = [];

        function getRandomId(domNode) {
            let _id = Math.random().toString(16).slice(2, 9);
            ids.push(_id);
            return _id;
        }

        class MyHeader extends Header {

            constructor(domNode) {
                let a = super(domNode);
                domNode.setAttribute('id', getRandomId(domNode));
                this.cache = {};
            }

            static create(value) {
                const node = super.create();
                return node;
            }

            static formats(domNode) {
                return {
                    id: domNode.getAttribute("id")
                };
            }
        }

        Quill.register("formats/header", MyHeader);
        MyHeader.blotName = "header"

有了这些新模块，请注意，为了创建目录，我们还需要几个步骤：查找所有标题标签，向它们添加一些有意义的

id

属性，并将它们的列表放在帖子的开头。

有关 Laravel 中的详细说明和完整实现，请查看 这个故事，要查看演示，请查看 这篇博文。

Answer 2

感谢您的教程，但不知怎的，鹅毛笔总是添加 h1 标签。我确实尝试点击 h2，但 quill 仍然输出 h2。

您能给我一些提示吗？