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-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-paste the following <script> near the end of your pages under JS Front to enable it.

              
                <script src="../../assets/js/hs.quill.js"></script>
              
            

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>
              
            

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 -->
                    
                  

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>
              
            

Attributes

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

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

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