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 {&nbsp; static create(value) {&nbsp; &nbsp; let node = super.create(value);&nbsp; &nbsp; node.setAttribute("href", value.href);&nbsp; &nbsp; if (value.rel) node.setAttribute("rel", value.rel);&nbsp; &nbsp; if (value.target) node.setAttribute("target", value.target);&nbsp; &nbsp; if (value.class) node.setAttribute("class", value.class);&nbsp; &nbsp; return node;&nbsp; }&nbsp; static formats(domNode) {&nbsp; &nbsp; return ATTRIBUTES.reduce((formats, attribute) => {&nbsp; &nbsp; &nbsp; if (domNode.hasAttribute(attribute)) {&nbsp; &nbsp; &nbsp; &nbsp; formats[attribute] = domNode.getAttribute(attribute);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return formats;&nbsp; &nbsp; }, {});&nbsp; }}InternalLink.blotName = "internal_link";InternalLink.tagName = "A";Quill.register({&nbsp; "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({&nbsp; "attributors/class/link": LinkClass,&nbsp; "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";