Summernote WYSIWYG Editor

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

Summernote WYSIWYG Editor documentation

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>

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

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`