描述
我正在尝试创建一个用于文本突出显示的内联印迹。我知道这个功能已经存在 https://github.com/quilljs/quill/blob/develop/formats/background.js在羽毛笔中。但在我的实现中，我想根据分配的突出显示类型为 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"
},
...
- 如果我多次应用格式，它就会开始累积，将标记放入标记中。例如：
<span class="texthighlight"><span class="texthighlight"><span class="texthighlight"><span class="texthighlight"></span></span></span></span>
预期的行为是仅存在一个亮点。
- 我无法删除格式。
结论
毫无疑问，我缺乏如何正确实施这一点的知识。我能够在其他情况下创建更简单的印迹，但现在我真的对覆盖某些印迹方法感到困惑。例如，以下列表显示了我指的方法以及我对每种方法的理解：
-
static formats(node)：返回domNode表示的格式。当索引位于格式化范围内时调用选择事件。
-
formats()：返回此 Blot 表示的格式。它用于Delta发电。当索引位于格式化范围内时调用选择事件。
-
format(format , value)：将格式应用于此印迹。
在重点展示的实现中，仅formats() and create(value)正在被召唤。我知道有一个例子 https://github.com/quilljs/parchment#example这些方法是如何实现的，但我没有得到所需的行为。我认为这是因为我不知道如何具体实施它们。有人可以回答我他们真正做什么、何时被召唤以及他们应该如何表现（实施）？
有人可以帮我吗？ :(
