JSFiddle - React, Tailwind, and code Playground

by gryzzly

HTML

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>


<!-- Initialize Quill editor -->
<quill-editor>
  <div>
  
  </div>
</quill-editor>

CSS

quill-editor .ql-editor {
  min-height: 80px;
  border: 1px solid green;
}

JavaScript

class QuillEditor extends HTMLElement {
	connectedCallback() {
		this.editor = new Quill(this.querySelector('div'), {
	    theme: 'bubble',
      modules: {
     		toolbar: {
     		 	container: [
          	['bold', 'strike'], ['link', 'image', 'video']]
      }
      }
    });
    this.editor.on('text-change', (delta) => {	
    console.log(this.editor.root.innerHTML)
    
			//window.content = this	.editor.getContent();
      

		});
  }
}
customElements.define(
'quill-editor', 
QuillEditor
);