How to make non selectable embed custom format in quilljs

Question

I would like to create a custom embed format which can be styled but it\'s text cannot be changed. My use case is pretty similar to the hashtag case. I want to have an exter

Answer 1

All you need to do is to set the contenteditable attribute to false on the main span. Currently, you are doing this on the nested span.

node.setAttribute('contenteditable', false);

I modified the hashtag code from your post and applied the change.

var Embed = Quill.import('blots/embed');
class QuillHashtag extends Embed {
  static create(value) {
    let node = super.create(value);
    node.setAttribute('contenteditable', false);
    node.innerHTML = value;
    return node;
  }
}
QuillHashtag.blotName = 'hashtag';
QuillHashtag.className = 'quill-hashtag';
QuillHashtag.tagName = 'span';

Quill.register({
  'formats/hashtag': QuillHashtag
});

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{
        header: [1, 2, false]
      }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});


document.getElementById('b').addEventListener('click', () => {
  var range = quill.getSelection();
  if (range) {
    var hashtag = prompt("Select hashtag", "foobar");
    quill.insertEmbed(range.index, 'hashtag', hashtag);
  }

});

#editor-container {
  height: 375px;
}

.quill-hashtag {
  background-color: lightgray;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.snow.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.min.js"></script>
<div id="editor-container"></div>
<button id="b">add hashtag</button>