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?

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 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 MyTravel 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>
                    $(document).on('ready', function () {
                      // initialization of text editors
                      $.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>

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.

Contact Us