Summernote WYSIWYG Editor

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

Official documentation

For more detailed information and examples, see the official documentation: Summernote WYSIWYG Editor .

How to use?

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

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

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 Front to enable it.

                  
                    <script src="../../assets/js/hs.summernote-editor.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 text editors
                        $('.js-summernote-editor').each(function () {
                          var summernoteEditor = $.HSCore.components.HSSummernoteEditor.init($(this));
                        });
                      });
                    </script>

Basic example 

                        
                          <div class="summernote-editor">
                            <div class="js-summernote-editor"
                                   data-hs-summernote-editor-options='{
                                     "height": 300
                                   }'></div>
                          </div>

SCSS

SCSS-files of the component can be found here ../../assets/scss/front/vendor/summernote-editor/

JavaScript behavior

Extend

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

                  
                    <script>
                      $(document).on('ready', function () {
                        // initialization of summernote
                        $('.js-summernote-editor').each(function () {
                          var summernoteEditor = $.HSCore.components.HSSummernoteEditor.init($(this));

                          $.HSCore.components.HSSummernoteEditor.methods($(this), "destroy"); // matches $(this).summernote("destroy");
                        });
                      });
                    </script>

Attributes

Plugin methods are called using a wrapper:

                  
                    data-hs-summernote-editor-options='{
                     ...
                  }' - array

Methods

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

Parameters Description Default value

fontNames

 Define font family ["Arial", "Arial Black", "Comic Sans MS", "Courier New", "Helvetica Neue", "Helvetica", "Impact", "Lucida Grande", "Tahoma", "Times New Roman", "Verdana"]

height

 Set line height 100
Contact Us