如何使用鹅毛笔插入具有唯一类名的基本span标签

Question

这是我现有的草稿：-https://codepen.io/inspiraller/pen/ExjKPNE

   let Embed = Quill.import('blots/embed');

    class SpanEmbed extends Embed {
      static blotName = 'spanEmbed';
      static tagName = 'span';
      static className = "spanEmbed"
      static create(variable) {
        const node = super.create();
        node.classList.add('myclass');
        node.innerText = variable.value;
        return node;
      }
    }

    SpanEmbed.blotName = 'spanEmbed';
    SpanEmbed.tagName = 'span';
    SpanEmbed.className='myclass';

    //############################################

    Quill.register(SpanEmbed);

    var quill = new Quill('#editor-container');

    $('#spanEmbed-button').click(function() {
      quill.format('spanEmbed', true);
    });

问题是当我单击spanEmbed时，它创建了未定义的。

我只希望它创建：

<span className="myclass"></span>

当前我在控制台中遇到错误：

错误TypeError：wrapper.appendChild不是函数

Answer 1

我意识到我没有正确插入。现在已修复：

   let Embed = Quill.import('blots/embed');

    class SpanEmbed extends Embed {
      static create(value) {
        const node = super.create();
        node.classList.add('myspan');
        node.innerText = value;
        return node;
      }
    }

    SpanEmbed.blotName = 'spanEmbed';
    SpanEmbed.tagName = 'span';
    SpanEmbed.className='myclass';

    //############################################

    Quill.register(SpanEmbed);

    var quill = new Quill('#editor-container');

    $('#spanEmbed-button').click(function() {
      var range = quill.getSelection();
      if (range) {
        quill.insertEmbed(range.index, 'spanEmbed', 'this text');
      }
    });