javascript - QuillJS : Cannot register a custom class attributor

Question

我的项目正在使用 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);

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

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

Answer 1

正如您在 Parchment Attributor Class 的源代码中看到的那样，这种属性也使用一个值来创建类。所以最终的类名应该是形式 class-value .如果您想实现单一值类属性，您可能需要扩展基础 Parchment Attributor并制作您自己的归因者，或使用白名单仅允许一个值。或者你可以像 quill 那样为他的类(class)做前缀，给你的所有类(class)加上前缀( 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 会识别并保留它们。

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