Javascript 什么、如何以及何时使用静态格式、自定义blot上的格式和格式？ 描述

我试图创建一个内联的文字突出显示污点。我知道用羽毛笔。但是在我的实现中，我希望根据所分配的突出显示类型为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';

问题

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

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

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

如果我多次应用格式，它就会开始累积，将标记放入标记中。例如：

预期的行为是只有一个高亮显示

我无法删除格式设置

结论 毫无疑问，我对如何正确实施这一点缺乏知识。我可以在其他情况下创建更简单的blot，但现在我真的对覆盖某些blot方法感到困惑。例如，以下列表显示了我所指的方法，以及我对每种方法的理解：

• 静态格式（节点）

  ：返回由domNode表示的格式。当索引在格式化范围内时对选择事件调用

• formats（）

  ：返回此污点表示的格式。它用于生成增量。当索引在格式化范围内时对选择事件调用

• 格式（格式，值）

  ：将格式应用于此污点

在演示的突出显示实现中，仅调用

formats（）

和

create（value）

。我知道这些方法中的每一种都是如何实现的，但是我没有得到想要的行为。我想这是因为我不知道如何准确地实现它们。有人能回答我他们到底在做什么，什么时候被呼叫，以及他们应该如何行动（被实现）

谁能帮帮我吗（

编辑（2019年12月18日） 所以…经过几个小时的研究，我终于能够使编辑器更正确一些。在整个故事中，我最终创建了一个blot，它能够根据传递给formatting的值，以不同的样式格式化文本。您甚至可以通过提供或省略值来删除格式化

我终于能够得到第2项的答案，正如我所想，我在工具栏模块中找到了答案。关于格式方法及其差异，我想我可以更好地理解它。我仍然不明白为什么经常调用格式。我想我会从quill core中找到答案，但是……quill source code非常大，因为它涉及多个文件

我在这里提供了前面显示的代码的更新版本。所有代码都经过了注释，有利于希望了解更多有关如何：

定义自定义污点/格式

定义接受值并以不同方式行为的污点 取决于配置的值

定义自定义工具栏按钮，以响应和反映 编辑内容

我希望这将使人们更好地了解如何使用这一工具，并用它创造更大的兴趣和贡献

原始答案 似乎我设法得到了想要的结果。<强>我在这里给出答案，但我不认为它是正确的，，因为它不完整。得到了想要的结果，但是<强>我仍然不能理解事物为什么或为什么工作< /强>。nd当代码将来需要更改时。下面您可以检查整个项目的代码。要进行测试，只需运行它

我剩下的问题是：

格式

和

静态格式（domNode）

之间有什么区别 观察代码执行情况，它们会被调用几次，而

静态格式（domNode）

会被调用两次。这正常吗？我不知道，这就是我问的原因

在函数

中高亮显示SelectedText（hl）

，为什么hl显示为 一个错误的值？这是怎么发生的

应用格式时，将使用

创建
。当
当它被删除时，
format（format，value）
被调用。有一些代码片段（格式内部）从未被访问过。不应该应用
删除格式是一项仅限于
格式
的工作？为什么我必须更改
DOM元素位于两个不同的位置

我想我可以通过查看答案来找到第二个问题的答案。但是我不太确定。如果我能弄清楚，我会回来编辑这个答案，好吗？我知道其他人也可能有同样的问题

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

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

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

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