Summernote WYSIWYG Editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.

How to use?

To add hs.summernote-editor.js in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin.

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

                  
                    <link href="../../assets/vendor/summernote/dist/summernote-lite.css"></link>

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

                  
                    <script src="../../assets/vendor/summernote/dist/summernote-lite.js"></script>

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

                  
                    <script src="../../assets/js/components/hs.summernote-editor.js"></script>

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

                  
                    <script>
                      // initialization of summernote plugin
                      $(document).on('ready', function () {
                        $.HSCore.components.HSSummernoteEditor.init('.js-summernote-editor');
                      });
                    </script>

Basic example 

                        
                          <div class="u-summernote-editor">
                            <div class="js-summernote-editor" data-height="300"></div>
                          </div>

Modal 

                      
                        <!-- 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 modal-xl" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Create new article</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">×</span>
                                </button>
                              </div>
                              <div class="modal-body">
                                <div class="u-summernote-editor">
                                  <div class="js-summernote-editor" data-height="300"></div>
                                </div>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Create</button>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Modal -->

Hint for mentions

Start type "@"

                    
                       <div class="u-summernote-editor">
                         <div class="js-summernote-editor"
                                 data-placeholder="Leave a comment to @somebody here ;)"
                                 data-toolbar="false"
                                 data-mentions='["John Doe", "Devid Brown", "Angel Leon", "Roman Kupper"]'
                                 data-height="300">
                         </div>
                       </div>
                    
                  
                    
                     <script>
                       $(document).on('ready', function () {
                           $.HSCore.components.HSSummernoteEditor.init('.js-summernote-editor-hint', {
                               toolbar: false,
                           });
                       });
                     </script>

JavaScript behavior

Attributes

All data attributes are transformed as follows:

from:

                  
                    fontNames

to:

                  
                    data-font-names

look at the parameter on the official documentation page of the plugin: https://summernote.org/deep-dive and paste the data attribute according to this transformation.

Methods

The methods work as follows:

from:

                    
                      $('#summernote').summernote('insertText', 'hello world');

to:

                    
                      $.HSCore.components.HSSummernoteEditor.method('#summernote', 'insertText', 'hello world');

- look at the method on the official documentation page of the plugin: https://summernote.org/deep-dive and insert the data attribute according to this transformation.

Callbacks

Callbacks work like this:

                  
                    $('#summernote').summernote({
                      callbacks: {
                        onFocus: function() {
                          console.log('Editable area is focused');
                        }
                      }
                    });

to:

                  
                    $.HSCore.components.HSSummernoteEditor.init('#summernote', {
                      callbacks: {
                       onFocus: function() {
                            console.log('Editable area is focused');
                          }
                      }
                    });

- look at the callback on the official documentation page of the plugin https://summernote.org/deep-dive and insert it according to the example above.