CODEWITHSUNDEEP
quill
Inspiraller
Inspiraller

Reputation: 3806

how to insert a basic span tag with a unique classname with quill

This is my existing draft: - 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);
    });

The problem is when I click spanEmbed, it creates undefined.

I just want it to create:

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

Currently I am getting an error in the console:

error TypeError: wrapper.appendChild is not a function

Upvotes: 1

Views: 2359

Answers (1)

Inspiraller
Inspiraller

Reputation: 3806

I realised I didn't insert properly. It's now fixed:

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

Upvotes: 1

Related Questions