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

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

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

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

Basic example 


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

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

Attributes

Plugin methods are called using a wrapper:

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

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