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

Zep*_*hyr 5 javascript quill

我的项目正在使用 QuillJS。我正在尝试添加自定义类属性。我希望我的链接能够没有类名,或者类名“自定义链接”。阅读此处的文档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);
Run Code Online (Sandbox Code Playgroud)

但是,当我插入<a class="custom-link" href="https://google.com">Hello</a>编辑器时,类名被删除。有人可以帮忙吗?

这里有一个 Quill Playground 示例:https ://codepen.io/anon/pen/qoPVxO

Pau*_*tte 1

正如您在Parchment 属性器类的源代码中看到的,这种属性器还使用一个值来创建该类。所以最终的类名应该是这样的形式class-value。如果您想实现单值类归因,您可能必须扩展基础Parchment 归因器并创建自己的归因器,或者使用白名单仅允许一个值。或者,您可以像 quill 对其类所做的那样,通过为所有类添加前缀(ql-align-centerql-videoql-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);
Run Code Online (Sandbox Code Playgroud)

通过这样做,它允许您使用类prefix-custom-linkprefix-another-class. 鹅毛笔会认出并保留它们。

您还可以务实地将此类之一添加到您的选择中,如下所示:quill.format('prefix', 'custom-link');