Text Editor

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

Summernote

You can also use summernote in bootstrap 4 using summernote-bs4.js and summernote-bs4.css. This is also beta version, as Bootstrap 4 is in beta. Below is an code example using bootstrap 4.

<div class="summernote"></div>

<script type="text/javascript">
(function($) {
  "use strict";
  $('.summernote').summernote({
    height: 200,
    styleTags: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
  });
})(jQuery);
</script>

Toolbar

Summernote allows you to make own custom toolbar and you can compose a toolbar with pre-shipped buttons like in the example below.

<div class="summernote-toolbar"></div>

<script type="text/javascript">
(function($) {
  "use strict";
  $('.summernote-toolbar').summernote({
    height: 200,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'picture']],
      ['para', ['ul', 'ol', 'paragraph']]
    ]
  });
})(jQuery);
</script>
version: 4.1.2