Air-mode

Air-mode give an interface without the Toolbar. To reveal popover Toolbar, select a text where you want to modify. Simply turn on airMode and just focus on text.

$('.summernote').summernote({
  airMode: true
});

Example

This is an Air-mode editable area.

  • Select a text to reveal the toolbar.
  • Edit rich document on-the-fly, so elastic!

End of air-mode area

Themes with bootswatch

Styles change according to Bootstraps Theme. The editor below editor uses the Bootswatch Themes based on Bootstrap 3, you can also do the same with Bootstrap 4: Bootswatch

If you wish to use the Lite version of Summernote and change it’s theme, you can look at or use the Themes at summernote-themes.



Multiple Editor

To display multiple editors on a page, you need to place more than two <div> elements in HTML.

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

Then run summernote with jQuery selector.

$(document).ready(function() {
  $('.summernote').summernote();
});

summernote 1

summernote 2

Click to edit

You can edit content on the fly.

html:

<button id="edit" class="btn btn-primary" onclick="edit()" type="button">Edit 1</button>
<button id="save" class="btn btn-primary" onclick="save()" type="button">Save 2</button>
<div class="click2edit">click2edit</div>

Javascript:

var edit = function() {
  $('.click2edit').summernote({focus: true});
};

var save = function() {
  var markup = $('.click2edit').summernote('code');
  $('.click2edit').summernote('destroy');
};

Hello world~!

Codemirror as codeview

If you include a CodeMirror on a page, you can use CodeMirror to Codeview. Include jQuery, Bootstrap and CodeMirror with Summernote.

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js) -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js"></script>

<!-- include summernote css/js-->
<link href="summernote.css">
<script src="summernote.js"></script>

Initialize Summernote with codemirror options

$('.summernote').summernote({
  height: 150,   //set editable area's height
  codemirror: { // codemirror options
    theme: 'monokai'
  }
});

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functions.



Hint

Summernote supports autocomplete features, hint to help typing. You can define custom hints with options. Hint options can be an object or array for multiple hints.

Key Type Description
match RegExp required Regular expression for checking trigger pattern.
search Function required Handler for matched keyword. You can passed suggestion items with callback. First argument is keyword and second is callback.
template Function optional Item template on suggestion popover. This function get item as argument and should return String type.
content Function optional Template function for insertion. You can switch item with node for insertion with this function. This function get item as first argument and should return Element or String.

Hint for words

$(".hint2basic").summernote({
  height: 100,
  toolbar: false,
  placeholder: 'type with apple, orange, watermelon and lemon',
  hint: {
    words: ['apple', 'orange', 'watermelon', 'lemon'],
    match: /\b(\w{1,})$/,
    search: function (keyword, callback) {
      callback($.grep(this.words, function (item) {
        return item.indexOf(keyword) === 0;
      }));
    }
  }
});

Hint for emoji

For Emoji’s you can use https://api.github.com/emojis

$.ajax({
  url: 'https://api.github.com/emojis',
  async: false 
}).then(function(data) {
  window.emojis = Object.keys(data);
  window.emojiUrls = data; 
});;

$(".hint2emoji").summernote({
  height: 100,
  toolbar: false,
  placeholder: 'type starting with : and any alphabet',
  hint: {
    match: /:([\-+\w]+)$/,
    search: function (keyword, callback) {
      callback($.grep(emojis, function (item) {
        return item.indexOf(keyword)  === 0;
      }));
    },
    template: function (item) {
      var content = emojiUrls[item];
      return '<img src="' + content + '" width="20" /> :' + item + ':';
    },
    content: function (item) {
      var url = emojiUrls[item];
      if (url) {
        return $('<img />').attr('src', url).css('width', 20)[0];
      }
      return '';
    }
  }
});

Hint for mentions

For Mentions: [jayden, sam, alvin, david]

$(".hint2mention").summernote({
  height: 100,
  toolbar: false,
  hint: {
    mentions: ['jayden', 'sam', 'alvin', 'david'],
    match: /\B@(\w*)$/,
    search: function (keyword, callback) {
      callback($.grep(this.mentions, function (item) {
        return item.indexOf(keyword) == 0;
      }));
    },
    content: function (item) {
      return '@' + item;
    }    
  }
});