Question

说明

我正在尝试创建用于文本突出显示的内联污点。我知道this feature is already present的羽毛笔。但是在我的实现中，我想根据分配的突出显示类型为html元素分配一个不同的值。这是我得到的：

let Inline = Quill.import('blots/inline');

class TextHighlight extends Inline {
    static create(value) {
        let node = super.create();
        if(!value || value < 1) return node;

        if(value == 5){
            node.style.color = 'rgb(225, 225, 225)';
        }
        else {
            node.style.borderRadius = '2px';
            node.style.padding = '2px';

            if(value == 1){ node.style.background = 'rgb(254, 255, 171)'; }
            if(value == 2){ node.style.background = 'rgb(255, 171, 171)'; }
            if(value == 3){ node.style.background = 'rgb(171, 207, 255)'; }
            if(value == 4){ node.style.background = 'rgb(178, 255, 171)'; }
        }

        node.setAttribute('data-value' , value);
        return node;
    }

    formats() {
        console.log('#formats()');
        let result = this.domNode.getAttribute('data-value');
        return result ? result : 0;
    }
}

TextHighlight.blotName = 'texthighlight';
TextHighlight.tagName = 'span';

我的删除/添加功能：

function highlightSelectedText(value) {
   if (value < 0 || value > 5) return false;

   var range = quill.getSelection();

   if (range && range.length > 0) {
      if (value > 0) {
         quill.formatText(
            range.index,
            range.length,
            'texthighlight',
            value,
            true);
      }
      else {
         quill.formatText(range.index, range.length, 'texthighlight', false, false);
      }
   }
}

最后创建Quill实例：

var toolbarOptions = {
    container: '#toolbar-container',
    handlers: {
        'texthighlight': function (value) {
            highlightSelectedText(value);
        }
    }
};

var quill = new Quill('#editor', {
    theme: 'bubble',
    modules: {
        toolbar: toolbarOptions
    }
});

问题

突出显示的文本片段具有以下Delta：

...
{
   "attributes": {
      "0": "3"
   },
   "insert": "highlighted text"
},
...

应该显示“ texthighlight”而不是0，例如：

...
{
   "attributes": {
      "texthighlight": "3"
   },
   "insert": "highlighted text"
},
...

如果我多次套用格式，它将开始累积，将标记放入标记内。例如：

预期的行为是只有一个亮点出现。

我无法删除格式。

结论

毫无疑问，我缺乏有关如何正确实施此方法的知识。我可以在其他情况下创建更简单的印迹，但是现在我真的对覆盖某些印迹方法感到困惑。例如，下面的列表显示了我的意思以及每种方法的理解：

static formats(node)：返回由domNode表示的格式。当索引在格式化范围内时，调用选择事件。
formats()：返回此Blot表示的格式。它用于Delta生成。当索引在格式化范围内时，调用选择事件。
format(format , value)：对此格式化应用格式化。

在演示的突出显示实现中，仅调用formats()和create(value)。我知道an example是如何实现每种方法的，但是我没有得到想要的行为。我认为这是因为我不知道如何准确地实现它们。有人可以回答我他们的实际情况，被召唤的时间以及应该如何表现（被实施）吗？

有人可以帮我吗？：（

Answer 1

编辑（2019年12月18日）

所以...经过数小时的研究，我终于能够使编辑器更加正确。在整个故事中，我最终创建了一个污点，该污点能够根据传递给格式化的值来格式化具有不同样式的文本。您甚至可以通过提供或省略值来删除格式。

我终于能够获得第2项的答案，并且据我所知，它在工具栏模块中找到了。关于格式方法及其差异，我想我可以更好地理解它。 我仍然不明白为什么这么频繁地调用格式。我想我会在羽毛笔核心上找到答案，但是...羽毛笔源代码非常大，因为它涉及多个文件。

我将前面显示的代码的更新版本放在此处。所有人都评论了它，对任何想了解更多有关如何做的人都有利：

定义自定义印迹/格式，
定义可接受值并以不同方式表现的印迹取决于配置的值。
定义自定义工具栏按钮，这些按钮可响应并反映状态编辑器内容。

我希望这将使人们能够更好地理解该工具的使用方式，并由此产生更大的兴趣和贡献。

Full Example on GitHub

原始答案

看来我设法以某种方式获得了预期的结果。 我在这里回答，但我认为它不正确，因为它还不完整。获得了预期的结果，但是我仍然无法理解事情的工作方式或原因。理解过程变得很基础，尤其是在将来需要更改代码的情况下。您可以在下面查看整个项目的代码。要进行测试，只需运行它即可。

我剩下的问题是：

formats和static formats(domNode)有什么区别？如果你观察代码执行，它们被调用了几次，而static formats(domNode)被调用了两次。这正常吗？我不知道，这就是我要问的原因。
在函数highlightSelectedText(hl)中，为什么hl与假值？这是怎么发生的？
应用格式化时，将使用create。什么时候将其删除，将调用format(format, value)。有些代码片段（内部格式）是永远不会到达的。不应该申请删除格式是仅format的工作？为什么我必须改变在两个不同位置的DOM元素？

我认为我可以通过查看toolbar module source code找到数字2的答案。但是我不太确定。如果我能解决所有问题，我将回到这里编辑此答案，好吗？我知道其他人也可能有相同的问题。

什么，如何以及何时使用静态格式，自定义印迹格式和格式？

说明

问题

结论

1 个答案:

编辑（2019年12月18日）

原始答案