Quill Js

OverviewOfficial Website

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

CSS
<!-- quill css -->
<link href="assets/libs/quill/quill.core.css" rel="stylesheet" type="text/css" />
<!-- bubble css for bubble editor-->
<link href="assets/libs/quill/quill.bubble.css" rel="stylesheet" type="text/css" />
<!-- snow css for snow editor-->
<link href="assets/libs/quill/quill.snow.css" rel="stylesheet" type="text/css" />
Javascript
<!-- quill js -->
<script src="assets/libs/quill/quill.min.js"></script>
Initjs (Custom js)
<!-- init js -->
<script src="assets/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
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);
});
© Velzon.
Design & Develop by Themesbrand