как вставить тег span basi c с уникальным именем класса с помощью quill

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