[英]Quill.js keeps stripping classes from anchor tags
我编写了一个自定义链接模块来处理内部链接等。该模块还向 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"]
}
});
不幸的是,接受的答案并没有完全解决我的问题。
我正在寻找一种可能的方法来添加/保留多个类。
这是最终的解决方案:
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
});
您还需要使用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
});
我认为文档没有帮助,但这里有一个示例也可以提供帮助:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.