Quill & LinkBlot example

by Imabot

HTML

<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<div id="editor-container"><p>Add a link on one of my word and look at the error in the console.</p></div>

JavaScript

// Initialize Quill editor
var quill = new Quill('#editor-container', {
  theme: 'snow',
});



const Parchment = Quill.imports.parchment;

class LinkBlot extends Parchment.Inline {

	static create(url) 
  	{
		console.log ('URL:', url);
		let node = super.create();
		node.setAttribute('href', url);
		node.setAttribute('target', '_blank');
		node.setAttribute('title', node.textContent);
		return node;
  	}

	static formats(domNode) {
			return domNode.getAttribute('href') || true;
	}

  	format(name, value) {
    	if (name === 'link' && value) {
      		this.domNode.setAttribute('href', value);
    	} else {
      			super.format(name, value);
    	}
  	}

	formats() {
		let formats = super.formats();
		formats['link'] = LinkBlot.formats(this.domNode);
		return formats;
	}
}
LinkBlot.blotName = 'link';
LinkBlot.tagName = 'A';

Parchment.register(LinkBlot);