quill - QuillJS：如何为描边颜色添加格式

Question

在 quill 1.3.7 编辑器中，我想添加一个按钮来选择笔触颜色。

我尝试的是：复制此https://github.com/quilljs/quill/blob/develop/formats/color.js并将大多数“ Color”替换为“ Stroke”：

import Quill from 'quill';
const Parchment = Quill.import('parchment');
class StrokeAttributor extends Parchment.Attributor.Style {
  value(domNode) {
    let value = super.value(domNode);
    if (!value.startsWith('rgb(')) return value;
    value = value.replace(/^[^\d]+/, '').replace(/[^\d]+$/, '');
    const hex = value.split(',').map(component => `00${parseInt(component, 10).toString(16)}`.slice(-2)).join('');
    return `#${hex}`;
  }
}
const StrokeClass = new Parchment.Attributor.Class('stroke', 'ql-stroke', {
  scope: Parchment.Scope.INLINE,
});
const StrokeStyle = new StrokeAttributor('stroke', '-webkit-text-stroke-color', {
  scope: Parchment.Scope.INLINE,
});
Quill.register(StrokeClass, true);
Quill.register(StrokeStyle, true);

工具栏容器选项以这种方式扩展：this.colors = [{ 'color': [] }, { 'stroke': [] }, { 'background': [] }];

结果是一个没有选项的按钮：

像这样添加颜色值this.colors = [{ 'color': [] }, { 'stroke': ['#888888'] }, { 'background': [] }];也不会显示可选择的颜色选项。

创建 Stroke Selector 的另一个想法是这样的示例https://github.com/quilljs/quill/blob/develop/formats/italic.js：

import Quill from 'quill';
const Parchment = Quill.import('parchment');
const BackgroundClass = Quill.import('attributors/class/background');

class StrokeClass extends BackgroundClass {};
StrokeClass.attrName = 'stroke';
StrokeClass.keyName = 'ql-stroke';

class StrokeStyle extends BackgroundStyle {};
StrokeStyle.attrName = 'stroke';
StrokeStyle.keyName = '-webkit-text-stroke-color';

Quill.register(StrokeClass, true);
Quill.register(StrokeStyle, true);

但这显示了一个错误：Uncaught TypeError: Class extends value #<ClassAttributor> is not a constructor or null

什么是有效的（不幸的是，它应该不彻底）：当直接在 BackgroundClass 设置属性值时，格式化工作（只要-webkit-text-stroke-width在整个 CSS 中有设置）：

import Quill from 'quill';
const BackgroundClass = Quill.import('attributors/class/background');
const BackgroundStyle = Quill.import('attributors/style/background');
BackgroundClass.keyName = 'ql-stroke';
BackgroundStyle.keyName = '-webkit-text-stroke-color';

由于不是每个浏览器都支持-webkit-text-stroke-width（https://developer.mozilla.org/de/docs/Web/CSS/-webkit-text-stroke-width），Quill 扩展理想地设置样式属性-webkit-text-stroke并使用例如1px [selected colorname]或0px如果有没有选择颜色。有什么可以复制的代码吗？

标签： quill