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 href="../../assets/vendor/summernote/dist/summernote-lite.css"></link>
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 Nova to enable it.

<script src="../../assets/js/components/hs.summernote-editor.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  // initialization of summernote plugin
  $(document).on('ready', function () {
    $.HSCore.components.HSSummernoteEditor.init('.js-summernote-editor');
  });
</script>
Copy

Basic example 


<div class="u-summernote-editor">
  <div class="js-summernote-editor" data-height="300"></div>
</div>
Copy

Modal 

<!-- Button Trigger Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Open modal
</button>
<!-- End Button Trigger Modal -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create new article</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="u-summernote-editor">
          <div class="js-summernote-editor" data-height="300"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Create</button>
      </div>
    </div>
  </div>
</div>
<!-- End Modal -->
Copy

Hint for mentions

Start type "@"

Leave a comment to @somebody here ;)


<div class="u-summernote-editor">
  <div class="js-summernote-editor"
          data-placeholder="Leave a comment to @somebody here ;)"
          data-toolbar="false"
          data-mentions='["John Doe", "Devid Brown", "Angel Leon", "Roman Kupper"]'
          data-height="300">
  </div>
</div>
Copy
<script>
  $(document).on('ready', function () {
      $.HSCore.components.HSSummernoteEditor.init('.js-summernote-editor-hint', {
          toolbar: false,
      });
  });
</script>
Copy

JavaScript behavior

Attributes

All data attributes are transformed as follows:

from:

fontNames
Copy

to:

data-font-names
Copy

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');
Copy

to:

$.HSCore.components.HSSummernoteEditor.method('#summernote', 'insertText', 'hello world');
Copy

- 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');
    }
  }
});
Copy

to:

$.HSCore.components.HSSummernoteEditor.init('#summernote', {
  callbacks: {
   onFocus: function() {
        console.log('Editable area is focused');
      }
  }
});
Copy

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