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

Question

我已经编写了一个自定义 link 模块来处理内部 link 等。此外，该模块还向 A 标签添加了一些类，因此它们可以以不同的方式显示. 但是 Quill 会在再次实例化后删除类。

我已经发现您需要一个自定义属性。但是我无法让它工作。
为了简单起见，我创建了 a sandbox (without my module).

代码如下：

<!-- ... -->
<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

您还需要在 Quill 实例的一侧添加该元素，使用 Inline class。

这是一个例子：

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 2

不幸的是，接受的答案并没有完全解决我的问题。
我正在寻找一种可能的方法 add/keep multiple 类.

这是最终的解决方案：

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
});

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

Quill.js keeps stripping classes from anchor tags

javascript

wysiwyg

quill

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

Quill.js keeps stripping classes from anchor tags

javascript

wysiwyg

quill

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