Javascript 纬管跨距印迹格式

我已经为quill的轨迹更改创建了一个自定义跨距图，但每次都有一个新用户 除从上一个span blot继承的背景色外，所有属性（即cid、uid、name）都保持一致。我看不到新用户的不同颜色的建议，尽管这是一个不同的span blot。如何在定制的span blot中为不同的用户执行内联样式？。这就是我在代码中添加作者的方式

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

export class Track extends Inline {

  static blotName = 'track';
  static tagName = 'span';
  static formats(node) {
    return {
       color: node.getAttribute('color'),
      cid: node.getAttribute('cid'),
      uid: node.getAttribute('uid'),
      name:  node.getAttribute('name')
    };
  }

  static create({name, uid, cid, color}) {
    const node = super.create();
    node.setAttribute('name', name);
    node.setAttribute('uid', uid);
    node.setAttribute('cid', cid);
    node.style.backgroundColor = color;
    return node;
  }
Quill.register(Track);

---

请检查以下示例是否解决了您的问题：

const Inline=Quill.import（'blots/Inline'）；
类轨迹内联扩展{
静态创建（值）{
如果（！value）返回超级板条箱（false）；
让node=super.create（value）；
node.setAttribute（'data-name'，value.name）；
node.setAttribute（'data-uid'，value.uid）；
node.setAttribute（'data-cid'，value.cid）；
如果（value.group==1）{
node.classList.add（'highlight-1'）；
}
else if（value.group==2）{
node.classList.add（'highlight-2'）；
}
//否则如果。。。
返回节点；
}
//在这种特殊情况下，重写此方法，
//是什么导致增量作为内容返回给
//羽毛笔要有所需的信息。
静态格式（domNode）{
if（domNode.getAttribute（'data-cid'））&&
domNode.getAttribute（'data-uid'）&&
domNode.getAttribute（'data-name'））{
返回{
“名称”：domNode.getAttribute（'data-name'），
'cid'：domNode.getAttribute（'data-cid'），
'uid'：domNode.getAttribute（'data-uid'）
};
}
否则{
返回super.formats（domNode）；
}
}
格式（）{
//返回此类的格式列表（此格式）。
让formats=super.formats（）；
//Inline有domNode引用，它位于
//大小写表示标记名中定义的范围和结果。
格式['track']=track.formats（this.domNode）；
//在上面的代码中，我们似乎正在添加这种新格式。
返回格式；
}
}
Track.tagName='SPAN'；
Track.blottname='Track'；
羽毛笔寄存器（“格式/音轨”，音轨）；
变量工具栏选项={
容器：[[bold]、[italic]、[underline]、[strike]、[track]、[clean]，
处理程序：{
'轨道'：（）=>{
var range=quill.getSelection（）；
var值示例={
名称：“Foo”，
uid:10，
cid:20，
组别:1
};
quill.formatText（范围'track'，值示例）；
}
}
};
var quill=新的quill（“#编辑器”{
主题:"雪",，
模块：{
工具栏：工具栏选项
}
});
window.quill=quill
。突出显示-1{
背景：绿色；
}
.亮点-2{
背景：橙色；
}

说明：
选择文本的一部分
单击“不可见”按钮
将组值更改为2
再次单击“不可见”按钮
不要忘记检查生成的HTML结构以及编辑器的增量
Lorem ipsum dolor sit amet，是一位杰出的献身者。毛里斯·法雷特拉（Mauris pharetra）、泰勒斯·卡塞特图尔（tellus id commodo Concertetur）、乌尔纳·泰勒斯·瓦里乌斯·埃尼姆（urna tellus varius enim）、内克·亨德雷特·图尔皮斯（nec hendrerit turpis）和欧盟。但是，埃利芬德·埃尼姆和阿库姆桑·弗林利亚

在您的存储库中完成了惊人的工作，但是我意识到添加类样式是可行的，但内联样式会产生冲突，这是不应该发生的，为样式跨度添加类是最好的方法
 author() {
     this.trackChanges = !this.trackChanges;
     const range = this.editor.quillEditor.getSelection();
     if (range) {
        if (this.trackChanges) {
          this.editor.quillEditor.format('track', {name: this.name, uid: this.id, cid: this.chance.guid(), color: this.color});
        }
    }
  }