Quill.js 不断从锚标记中剥离类

Question

我编写了一个自定义链接模块来处理内部链接等。该模块还向 A 标记添加了一些类，以便它们可以以不同的方式显示。但一旦再次实例化，Quill 就会删除这些类。我已经发现您需要一个自定义归因者。但我无法让它工作。为了保持简单，我创建了一个沙箱（没有我的模块）。这是代码：<!-- ... --><div id="editor">  <a href="/test" class="btn">Foo</a></div><!-- ... -->import Quill from "quill";import "quill-paste-smart";import "quill/dist/quill.snow.css";const Parchment = Quill.import("parchment");let LinkClass = new Parchment.Attributor.Class("link", "ql-link", {  scope: Parchment.Scope.INLINE,  whitelist: ["btn"]});Quill.register({ "attributors/class/link": LinkClass }, true);new Quill("#editor", {  theme: "snow",  modules: {    toolbar: ["bold", "italic", "underline", "link", "clean"]  }});

Answer 1

不幸的是，接受的答案并没有完全解决我的问题。

我正在寻找一种添加/保留多个类的可能方法。

这是最终的解决方案：

const Inline = Quill.import("blots/inline");

const ATTRIBUTES = ["href", "rel", "target", "class"];

class InternalLink extends Inline {

  static create(value) {

    let node = super.create(value);

    node.setAttribute("href", value.href);

    if (value.rel) node.setAttribute("rel", value.rel);

    if (value.target) node.setAttribute("target", value.target);

    if (value.class) node.setAttribute("class", value.class);

    return node;

  }

  static formats(domNode) {

    return ATTRIBUTES.reduce((formats, attribute) => {

      if (domNode.hasAttribute(attribute)) {

        formats[attribute] = domNode.getAttribute(attribute);

      }

      return formats;

    }, {});

  }

}

InternalLink.blotName = "internal_link";

InternalLink.tagName = "A";

Quill.register({

  "formats/link": InternalLink

});

Answer 2

您还需要使用该类将该元素添加到 Quill 实例的一侧Inline。

这是一个例子：

const Inline = Quill.import("blots/inline");

InternalLink.blotName = "internal_link";

InternalLink.className = "btn";

InternalLink.tagName = "A";

Quill.register({

  "attributors/class/link": LinkClass,

  "formats/internal_link": InternalLink

});

Answer 3

此版本将保留所有属性（在我的初步测试中）并且不需要将它们显式定义为印迹。

const Inline = Quill.import("blots/inline");

class FixedLink extends Inline {

    static create(value) {

        let node = super.create(value);

        for (const key in value){

            node.setAttribute(key, value[key]);

        }

        return node;

    }

    static formats(domNode) {

        const attributes = {};

        for (const attr of domNode.attributes){

            attributes[attr.name] = attr.value;

        }

        return attributes;

    }

}

FixedLink.blotName = "fixed_link";

FixedLink.tagName = "A";