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

tf7tbtn2  于 2023-05-12  发布在  Java
关注(0)|答案(3)|浏览(104)

我写了一个自定义链接模块来处理内部链接等此外,该模块还向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"]
  }
});
wmtdaxz3

wmtdaxz31#

不幸的是,公认的答案并不能完全解决我的问题。
我正在寻找一种可能的方法来添加/保留 * 多个 * 类。
以下是最终的解决方案:

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

w80xi6nr

w80xi6nr2#

您还需要使用Inline类将该元素添加到Quill示例中。
下面是一个例子:

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

我不认为文档有帮助,但这里有一个例子也可以帮助:

kognpnkq

kognpnkq3#

这是Gordon's Answer的修改版本。
这个版本将保留所有属性(在我的初步测试中)&不需要在印迹中显式定义它们。

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";

相关问题