Bootstrap 4 Advanced Components : WYSIWYG text editor

Bootstrap 4 Advanced Components : text editor, WYSIWYG editor with Summernote

by djibe89

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css">
<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="jumbotron my-4">
        <h1>Summernote text editor <span class="text-muted">(0.8.11)</span>, WYSIWYG editor for Bootstrap 4 Advanced Components</h1>
        <p class="lead">by djibe, styled in material design.</p>
        <blockquote class="blockquote">
          <p>
            Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online
          </p>
        </blockquote>
        <h2>Setup</h2>
        <ol>
          <li>I am using Bootstrap 4 + <a href="http://daemonite.github.io/material/" target="_blank">daemonite material design</a> (see JSFiddle Resources)</li>
          <li>Add Summernote CSS to the header before bootstrap.min.css : <code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css"></code><br> To use localy, you need the /font folder (containing summernote
            font)</li>
          <li>Add Summernote JS after bootstrap.min.js <code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.min.js">&lt;/script></code></li>
          <li>Add a simple Bootstrap textarea in a...

CSS

/* Material design styling */

/*placeholder style*/

.note-placeholder {
  position: absolute;
  top: 20%;
  left: 5%;
  font-size: 2rem;
  color: #e4e5e7;
  pointer-events: none;
}

/*Toolbar panel*/

.note-editor .note-toolbar {
  background: #f0f0f1;
  border-bottom: 1px solid #c2cad8;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

/*Buttons from toolbar*/

.summernote .btn-group, .popover-content .btn-group {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.note-popover {
  background: #f0f0f1!important;
}

.summernote .btn, .note-btn {
  color: rgba(0, 0, 0, .54)!important;
  background-color: transparent!important;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.summernote .dropdown-toggle:after {
  vertical-align: middle;
}

.note-editor.card {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 2px;
}

/* Border of the Summernote textarea */

.note-editor.note-frame {
  border: 1px solid rgba(0, 0, 0, .14);
}

/* Padding of the text in textarea */

.note-editor.note-frame .note-editing-area .note-editable {
  padding-top: 1rem;
}

JavaScript

//Bootstrap 4 + daemonite material UI + Summernote wysiwyg text editor
//doc : https://github.com/summernote/summernote

$('#my-summernote').summernote({
  minHeight: 200,
  placeholder: 'Write here ...',
  focus: false,
  airMode: false,
  fontNames: ['Roboto', 'Calibri', 'Times New Roman', 'Arial'],
  fontNamesIgnoreCheck: ['Roboto', 'Calibri'],
  dialogsInBody: true,
  dialogsFade: true,
  disableDragAndDrop: false,
  toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['para', ['style', 'ul', 'ol', 'paragraph']],
    ['fontsize', ['fontsize']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['height', ['height']],
    ['misc', ['undo', 'redo', 'print', 'help', 'fullscreen']]
  ],
  popover: {
    air: [
      ['color', ['color']],
      ['font', ['bold', 'underline', 'clear']]
    ]
  },
  print: {
    //'stylesheetUrl': 'url_of_stylesheet_for_printing'
  }
});
$('#my-summernote2').summernote({airMode: true,placeholder:'Try the airmode'});