Quill

Text editor

Quill documentation

How to use?

Add the following library Quill stylesheet and script in your page.

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="./assets/vendor/quill/dist/quill.snow.css">
Copy

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="./assets/vendor/quill/dist/quill.min.js"></script>
Copy

Copy-paste the following <script> near the end of your pages under JS Front to enable it.
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF QUILLJS EDITOR
    // =======================================================
    var quill = $.HSCore.components.HSQuill.init('.js-quill');
  });
</script>
Copy

Basic example 


<!-- Quill -->
<div class="quill-custom">
  <div class="js-quill" style="min-height: 15rem;"
       data-hs-quill-options='{
       "placeholder": "Type your message...",
        "modules": {
          "toolbar": [
            ["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
          ]
        }
       }'>Creative mind at Htmlstream
  </div>
</div>
<!-- End Quill -->
Copy

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/quill/

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF QUILLJS EDITOR
    // =======================================================
     var quill = $.HSCore.components.HSQuill.init('.js-quill');

     quill.getLength();
  });
</script>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-quill-options='{
   ...
}' - array
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-quill-options='{}'. For more detailed or missing attributes/functions, see the official Quill documentation page.

Parameters Description Default value

theme

 Theme for editor snow