How to add non-editable tag to content in Quill Editor

Question

I want to add a couple of prebuilt shortcuts like

<div class="label"> Label Text <span>x</span><div> 

for html content in the editor. Adding such a tag should not be a problem in itself. However, I do not want the user to be able to edit the text inside the label. You can’t even place the cursor inside the label. When deleting, all div should be deleted. The whole label should act as an image in a sense. Is it possible?

Answer 1

You should be able to achieve this by writing your own blot :

 class Label extends Parchment.Embed { static create(value) { const node = super.create(value); node.innerText = value; // Remember to set this so users can't edit // the label content node.contentEditable = 'false'; this._addRemovalButton(node); return node; } static value(node) { // Only return the text of the first child // node (ie the text node), otherwise the // value includes the contents of the button return node.childNodes[0].textContent; } static _addRemovalButton(node) { const button = document.createElement('button'); button.innerText = 'x'; button.onclick = () => node.remove(); button.contentEditable = 'false'; node.appendChild(button); // Extra span forces the cursor to the end of // the label, otherwise it appears inside the // removal button const span = document.createElement('span'); span.innerText = ' '; node.appendChild(span); } } Label.blotName = 'label'; Label.tagName = 'SPAN'; Label.className = 'ql-label'; 

You register this with Quill:

 Quill.register(Label); 

And finally, you can use it just like image or other inserts :

 quill.updateContents( new Delta().insert({ label: 'foo' }) ); 

NB. Any style you need can be applied with .ql-label :

 .ql-label { background-color: lightgrey; padding: 0.3em; margin: 0 0.2em; } .ql-label button { margin-left: 0.3em; } 

Finally, finally: a working example .