Quill Rich Text Editor For Bootstrap 4

This is a powerful, beautiful, easy-to-use WYSIWYG rich text editor built with Bootstrap 4, Quill editor and SVG icons.

The goal of the Bootstrap Quill Editor is to provide the Quill editing experience for your Bootstrap 4 projects.

How to use it:

1. Installation.

# Yarn
$ yarn add bootstrap-quill

# NPM
$ npm install bootstrap-quill --save

2. Load the Quill editor's stylesheet in the document's head section.

<link rel="stylesheet" href="/css/quill.css">
<link rel="stylesheet" href="/css/quill.snow.css">
<link rel="stylesheet" href="/css/quill.bubble.css">

3. Load the Bootstrap 4 framework in the document.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

4. Load the sprite.svg.js for the editor icons.

<script src="sprite.svg.js"></script>

5. Load the Bootstrap Quill Editor's JavaScript in the document.

<script src="bootstrap-quill.js"></script>

6. Initialize the Bootstrap Quill Editor on the targer editable container. Refer to Quill Document for more information.

<div class="editor-full">
  <div id="document-full" class="ql-scroll-y" style="height: 300px;">
    <h1>jQueryScript.Net</h1>
  </div>
</div>

var toolbarOptions = [
    [{
      'header': [1, 2, 3, 4, 5, 6, false]
    }],
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote', 'code-block'],

    [{
      'header': 1
    }, {
      'header': 2
    }], // custom button values
    [{
      'list': 'ordered'
    }, {
      'list': 'bullet'
    }],
    [{
      'script': 'sub'
    }, {
      'script': 'super'
    }], // superscript/subscript
    [{
      'indent': '-1'
    }, {
      'indent': '+1'
    }], // outdent/indent
    [{
      'direction': 'rtl'
    }], // text direction

    [{
      'size': ['small', false, 'large', 'huge']
    }], // custom dropdown

    [{
      'color': []
    }, {
      'background': []
    }], // dropdown with defaults from theme
    [{
      'font': []
    }],
    [{
      'align': []
    }],
    ['link', 'image'],

    ['clean'] // remove formatting button
  ];

var quillFull = new Quill('#document-full', {
  modules: {
    toolbar: toolbarOptions,
    autoformat: true
  },
  theme: 'snow',
  placeholder: "Write something..."
});

Changelog:

2018-10-05

• Refactored tool-module

2018-10-04

• Refactor tool controls

---

This awesome jQuery plugin is developed by Weavy. For more Advanced Usages, please check the demo page or visit the official website.