说明
我正在尝试创建一个用于文本突出显示的内联印迹。我知道这个功能已经存在于羽毛笔中。但是在我的实现中，我想根据分配的突出显示类型为 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
}
});
问题所在
- 突出显示的文本片段具有以下增量：
...
{
"attributes": {
"0": "3"
},
"insert": "highlighted text"
},
...
应该出现"文本突出显示"而不是 0，例如：
...
{
"attributes": {
"texthighlight": "3"
},
"insert": "highlighted text"
},
...
- 如果我多次应用格式，它会开始累积，将标记放在标记中。例如：
<span class="texthighlight"><span class="texthighlight"><span class="texthighlight"><span class="texthighlight"></span></span></span></span>
预期的行为是仅存在一个突出显示。
- 我无法删除格式。
结论
毫无疑问，我缺乏如何正确实施这一点的知识。在其他情况下，我能够创建更简单的印迹，但现在我真的对覆盖某些印迹方法感到困惑。例如，以下列表显示了我的意思，以及我对每种方法的理解：
static formats(node)：返回由 domNode 表示的格式。当索引在格式化范围内时，在选择事件上调用。formats()：返回此印迹所表示的格式。它用于增量生成。当索引在格式化范围内时，在选择事件上调用。format(format , value)：将格式应用于此印迹。
在演示的突出显示实现中，仅调用了formats()和create(value)。我知道有一个如何实现这些方法的示例，但我没有得到所需的行为。我认为这是因为我不知道如何准确实现它们。有人可以回答我他们真正做了什么，何时被召唤，以及他们应该如何表现(实施(？
有人可以帮我吗？:(
编辑(2019 年 12 月 18 日(
所以。。。经过几个小时的研究，我终于能够使编辑器更加正确。在整个故事中，我最终创建了一个印迹，该印迹能够根据传递给格式的值以不同的样式格式化文本。您甚至可以通过提供或省略值来删除格式。
我终于能够得到第 2 项的答案，并且正如我所想的那样，在工具栏模块中找到了它。关于格式方法及其差异，我想我可以更好地理解它。我仍然不明白为什么格式如此频繁地被调用。我想我会在鹅毛笔芯中找到答案，但是...鹅毛笔源代码非常大，因为它涉及多个文件。
我在这里放置了前面显示的代码的更新版本。这一切都是评论，有利于任何想要了解更多关于如何：
- 定义自定义印迹/格式，
- 定义接受值并以不同方式工作的印迹 取决于配置的值。
- 定义自定义工具栏按钮，以响应并反映 编辑器内容。
我希望这将使人们能够更好地了解如何使用这个工具，并用它产生更大的兴趣和贡献。
GitHub 上的完整示例
原始答案
看来我以某种方式设法得到了想要的结果。我在这里给出一个答案，但我认为它还没有正确，因为它不完整。获得了预期的结果，但我仍然无法理解事情是如何或为什么工作的。理解这个过程变得至关重要，特别是当将来需要更改代码时。您可以在下面检查整个项目的代码。要进行测试，只需运行它。
我剩下的问题是：
formats和static formats(domNode)有什么区别？如果你 观察代码执行情况，它们被调用几次，static formats(domNode)被调用两次。这正常吗？我不知道，这就是我问的原因。- 在函数
highlightSelectedText(hl)中，为什么hl会出现 一个假值？这是怎么发生的？ - 应用格式时，将使用
create。什么时候 它被删除，format(format, value)被调用。有些代码片段(内部格式(永远不会到达。不应该申请 删除格式是一项format的工作？为什么我必须更改 两个不同位置的 DOM 元素？
我想我可以通过查看工具栏模块源代码找到数字 2 的答案。但我不太确定。如果我能弄清楚这一切，我会回到这里编辑这个答案，好吗？我知道其他人也可能有同样的问题。