Gor*_*man 1 javascript wysiwyg quill
我编写了一个自定义链接模块来处理内部链接等。该模块还向 A 标记添加了一些类,以便它们可以以不同的方式显示。但一旦再次实例化,Quill 就会删除这些类。
我已经发现您需要一个自定义归因者。但我无法让它工作。
为了保持简单,我创建了一个沙箱(没有我的模块)。
这是代码:
<!-- ... -->
<div id="editor">
<a href="/test" class="btn">Foo</a>
</div>
<!-- ... -->
Run Code Online (Sandbox Code Playgroud)
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"]
}
});
Run Code Online (Sandbox Code Playgroud)
不幸的是,接受的答案并没有完全解决我的问题。
我正在寻找一种添加/保留多个类的可能方法。
这是最终的解决方案:
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
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2808 次 |
| 最近记录: |