Quill Span 印迹格式

Question

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);

I have created a custom span blot for track changes for quill, but everytime there is a new user all the attributes ie cid, uid, name remain consistent except the background color which gets inherited from the previous span blot. I cannot see suggestions of the new user in a different color, inspite of being a different span blot . How do I perform inline styling for different users in my custom made span blot ?. This is how I add authors in my code

 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});
        }
    }
  }

Answer 1

Please, check if the following example solves your problem:

 const Inline = Quill.import('blots/inline'); class Track extends Inline { static create(value) { if (!value) return super.crate(false); let node = super.create(value); node.setAttribute('data-name', value.name); node.setAttribute('data-uid', value.uid); node.setAttribute('data-cid', value.cid); if(value.group === 1) { node.classList.add('highlight-1'); } else if (value.group === 2) { node.classList.add('highlight-2'); } // else if... return node; } // Overriding this method, in this particular case, // is what causes the Delta returned as content by // Quill to have the desired information. static formats(domNode) { if (domNode.getAttribute('data-cid') && domNode.getAttribute('data-uid') && domNode.getAttribute('data-name')) { return { 'name': domNode.getAttribute('data-name') , 'cid': domNode.getAttribute('data-cid') , 'uid': domNode.getAttribute('data-uid') }; } else { return super.formats(domNode); } } formats() { // Returns the formats list this class (this format). let formats = super.formats(); // Inline has the domNode reference, which in this // case represents the SPAN, result defined in tagName. formats['track'] = Track.formats(this.domNode); // In the code above, it is as if we are adding this new format. return formats; } } Track.tagName = 'SPAN'; Track.blotName = 'track'; Quill.register('formats/track', Track); var toolbarOptions = { container: [['bold' , 'italic' , 'underline' , 'strike'] , ['track' , 'clean']], handlers: { 'track': () => { var range = quill.getSelection(); var valueExample = { name: 'Foo', uid: 10, cid: 20, group: 1 }; quill.formatText(range , 'track' , valueExample); } } }; var quill = new Quill('#editor', { theme: 'snow', modules: { toolbar: toolbarOptions } }); window.quill = quill;

 .highlight-1 { background: green; } .highlight-2 { background: orange; }

 <!-- Quill Stylesheet --> <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <!-- Quill lib --> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <h3>Instructions:</h3> <ol> <li>Select a portion of text.</li> <li>Click the invisible button.</li> <li>Change the group value to 2.</li> <li>Click the invisible button again.</li> <li>Don't forget to check the generated HTML structure, as well as the editor's Delta.</li> </ol> <!-- Create the editor container --> <div id="editor"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, tellus id commodo consectetur, urna tellus varius enim, nec hendrerit turpis diam eu erat. Ut eleifend enim et accumsan fringilla.</p> </div>

Also don't forget to take a look at this address . You will find lots of useful information.