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

我创建了一个自定义跨度印迹，以跟踪鹅毛笔的变化，但是每次有新用户时除从前一跨度印迹继承的背景色外，所有属性（即cid，uid，name）保持一致。尽管跨度不同，但看不到新用户用其他颜色显示的建议。如何在我的定制跨度印迹中为不同用户执行内联样式？这就是我在代码中添加作者的方式

 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

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

main();

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

也不要忘记看this address。您会发现很多有用的信息。

鹅毛笔跨度印迹格式

1 个答案: