Quill Js

OverviewOfficial Website

Quill is a modern rich text editor built for compatibility and extensibility.

CSS

<!-- quill css -->
<link href="{% static 'libs/quill/dist/quill.core.css'%}" rel="stylesheet" type="text/css" />
<!-- bubble css for bubble editor-->
<link href="{% static 'libs/quill/dist/quill.bubble.css'%}" rel="stylesheet" type="text/css" />
<!-- snow css for snow editor-->
<link href="{% static 'libs/quill/dist/quill.snow.css'%}" rel="stylesheet" type="text/css" />

Javascript

<!-- quill js -->
<script src="{% static 'libs/quill/dist/quill.min.js'%}"></script>

Initjs (Custom js)

<!-- init js -->
<script src="{% static 'js/pages/form-editor.init.js'%}"></script>

Add Package

yarn add quill --save

Remove Package

yarn remove quill or you can remove package by removing specific package from package.json

Quilljs Editor

Title Javascript

Snow Editor

Title	Javascript
Snow Editor	var snowEditor = document.querySelectorAll(".snow-editor") snowEditor.forEach(function (item) { var snowEditorData = {}; var issnowEditorVal = item.classList.contains("snow-editor"); if (issnowEditorVal==true) { snowEditorData.theme = 'snow', snowEditorData.modules = { 'toolbar': [[{ 'font': [] }, { 'size': [] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }], [{ 'script': 'super' }, { 'script': 'sub' }], [{ 'header': [false, 1, 2, 3, 4, 5, 6] }, 'blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], ['direction', { 'align': [] }], ['link', 'image', 'video'], ['clean']] } } new Quill(item, snowEditorData); });
Bubble Editor	`var bubbleEditor = document.querySelectorAll(".bubble-editor") bubbleEditor.forEach(function (element) { var bubbleEditorData = {}; var isbubbleEditorVal = element.classList.contains("bubble-editor"); if (isbubbleEditorVal==true) { bubbleEditorData.theme = 'bubble' } new Quill(element, bubbleEditorData); });`

var snowEditor = document.querySelectorAll(".snow-editor")
    snowEditor.forEach(function (item) {
        var snowEditorData = {};
        var issnowEditorVal = item.classList.contains("snow-editor");
        if (issnowEditorVal==true) {
            snowEditorData.theme = 'snow',
            snowEditorData.modules = {
            'toolbar': [[{ 'font': [] }, { 'size': [] }], ['bold', 'italic', 'underline', 'strike'],
             [{ 'color': [] }, { 'background': [] }], [{ 'script': 'super' }, { 'script': 'sub' }], 
             [{ 'header': [false, 1, 2, 3, 4, 5, 6] }, 'blockquote', 'code-block'], 
             [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], 
             ['direction', { 'align': [] }], ['link', 'image', 'video'], ['clean']]
        }
        }
    new Quill(item, snowEditorData);
});

Bubble Editor

var bubbleEditor = document.querySelectorAll(".bubble-editor")
bubbleEditor.forEach(function (element) {
    var bubbleEditorData = {};
    var isbubbleEditorVal = element.classList.contains("bubble-editor");
    if (isbubbleEditorVal==true) {
        bubbleEditorData.theme = 'bubble'
    }
new Quill(element, bubbleEditorData);
});