WYSIWYG Editor (Quill)

How to use

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.

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>

                    
                      <!-- 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"}]
                                ]
                              }
                             }'>
                        </div>
                      </div>
                      <!-- End Quill -->

Custom template

                    
                      <!-- Quill -->
                      <div class="quill-custom">
                        <div id="toolbar-container">
                          <ul class="list-inline ql-toolbar-list">
                            <li class="list-inline-item">
                              <button class="ql-bold"></button>
                            </li>
                            <li class="list-inline-item">
                              <button class="ql-italic"></button>
                            </li>
                            <li class="list-inline-item">
                              <button class="ql-underline"></button>
                            </li>
                            <li class="list-inline-item">
                              <button class="ql-strike"></button>
                            </li>
                            <li class="list-inline-item">
                              <button class="ql-link"></button>
                            </li>
                            <li class="list-inline-item">
                              <button class="ql-image"></button>
                            </li>
                            <li class="list-inline-item">
                              <button class="ql-blockquote"></button>
                            </li>
                            <li class="list-inline-item">
                              <button class="ql-code"></button>
                            </li>
                            <li class="list-inline-item">
                              <button class="ql-list" value="bullet"></button>
                            </li>
                          </ul>
                        </div>

                        <div class="js-quill-custom-template" style="min-height: 15rem;"
                             data-hs-quill-options='{
                                "placeholder": "Type your message...",
                                "toolbarBottom": true,
                                "modules": {
                                  "toolbar": "#toolbar-container"
                                }
                               }'>
                        </div>
                      </div>
                      <!-- End Quill -->

                    
                      <script>
                        $(document).on('ready', function () {
                          // initialization of quilljs editor
                          var quill = $.HSCore.components.HSQuill.init('.js-quill-custom-template');
                        });
                      </script>

Preview
HTML

                    
                      <!-- Button Trigger Modal -->
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Open modal
                      </button>
                      <!-- End Button Trigger Modal -->

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <!-- Header -->
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Copy to clipboard</h5>
                              <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                                <i class="tio-clear tio-lg" aria-hidden="true"></i>
                              </button>
                            </div>
                            <!-- End Header -->

                            <!-- Body -->
                            <div class="modal-body">
                              <label class="input-label">Project description</label>

                              <!-- Quill -->
                              <div class="quill-custom mb-3 mb-lg-7">
                                <div id="toolbar-container-modal-eg">
                                  <ul class="list-inline ql-toolbar-list">
                                    <li class="list-inline-item">
                                      <button class="ql-bold"></button>
                                    </li>
                                    <li class="list-inline-item">
                                      <button class="ql-italic"></button>
                                    </li>
                                    <li class="list-inline-item">
                                      <button class="ql-underline"></button>
                                    </li>
                                    <li class="list-inline-item">
                                      <button class="ql-strike"></button>
                                    </li>
                                    <li class="list-inline-item">
                                      <button class="ql-link"></button>
                                    </li>
                                    <li class="list-inline-item">
                                      <button class="ql-image"></button>
                                    </li>
                                    <li class="list-inline-item">
                                      <button class="ql-blockquote"></button>
                                    </li>
                                    <li class="list-inline-item">
                                      <button class="ql-code"></button>
                                    </li>
                                    <li class="list-inline-item">
                                      <button class="ql-list" value="bullet"></button>
                                    </li>
                                  </ul>
                                </div>

                                <div class="js-quill-modal-eg" style="min-height: 15rem;"
                                     data-hs-quill-options='{
                                        "placeholder": "Type your message...",
                                        "toolbarBottom": true,
                                        "attach": "#exampleModal",
                                        "modules": {
                                          "toolbar": "#toolbar-container-modal-eg"
                                        }
                                       }'>
                                </div>
                              </div>
                              <!-- End Quill -->
                            </div>
                            <!-- End Body -->

                            <!-- Footer -->
                            <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Continue</button>
                            </div>
                            <!-- End Footer -->
                          </div>
                        </div>
                      </div>
                      <!-- End Modal -->

Methods

Parameters	Description	Default value
`theme`	Theme for editor	`snow`

How to use

Basic examples

Custom template

Modal example

Methods