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