JSFiddle - React, Tailwind, and code Playground

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.js"></script>
<div id="editor">
  <h1 class="ql-align-center">Quill Rich Text Editor</h1>
  <p>This page is a demo of the <strong style="color: rgb(230, 0, 0);">Quill</strong> rich content editor</p>
  <p>Here is a link to <a href="https://quilljs.com/" target="_blank">Quill home page</a></p>
</div>

CSS

#editor {
  height: 200px;
}

.container {
  margin-bottom: 10px;
  text-align: right;
}

JavaScript

// Set Quill options
var toolbarOptions = [
  	[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  	[{ 'font': [] }],
	[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
	['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  	['blockquote', 'code-block', 'link'], 
  	[{ 'list': 'ordered'}, { 'list': 'bullet' }],
  	[{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  	[{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  	[{ 'direction': 'rtl' }],                        // text direction
  	[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
	[{ 'align': [] }],
  	['clean']                                         // remove formatting button
];

// Create Quill editor
var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },  
  theme: 'snow'
});