QuillJS:无法注册自定义类属性

Question

我的项目正在使用QuillJS。我正在尝试添加自定义类attributor。我希望我的链接可以没有类名，或者有一个类名"custom-link“。在阅读了https://github.com/quilljs/parchment#class-attributor这里的文档后，我编写了以下代码：

const Parchment = Quill.import('parchment');
const CustomLinkClass = new Parchment.Attributor.Class('custom-link', 'custom-link', {
  scope: Parchment.Scope.INLINE
});
Quill.register(CustomLinkClass, true);

但是，当我将<a class="custom-link" href="https://google.com">Hello</a>插入编辑器中时，类名被去掉了。有人能帮帮忙吗？

这里有一个羽毛笔游乐场的例子：https://codepen.io/anon/pen/qoPVxO

Answer 1

正如您在Parchment Attributor Class的源代码中所看到的，这种attributor也使用一个值来创建类。所以最终的类名应该是class-value的形式。如果您想实现单个值类属性，您可能需要扩展基本Parchment Attributor并创建自己的attributor，或者使用白名单只允许一个值。或者，您可以像quill一样为他的类添加前缀(ql-align-center、ql-video、ql-color-red等)。

const Parchment = Quill.import('parchment');
const PrefixClass = new Parchment.Attributor.Class('prefix', 'prefix', {
    scope: Parchment.Scope.INLINE,
    whitelist: [ 'custom-link', 'another-class' ]
});
Quill.register(PrefixClass, true);

通过这样做，它允许您使用类prefix-custom-link和prefix-another-class。奎尔会认出并保存它们。

您还可以像下面这样实际地将此类添加到您的选择中：quill.format('prefix', 'custom-link');