Air-mode

Air-mode gives clearer interface with hiddened toolbar. To reveal toolbar, select a text where you want to shape up. 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

Style changed accroding to bootstrap theme. More bootstrap theme: Bootswatch



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



Hint

Summernote support autocomplete features, hint for helping typing. You can define custom hint with options. Hint options can be 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

emoji: 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 mention

mention: [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;
    }    
  }
});

Plugin list

Below is useful plugin list.

For more plugin lists, visit to awesome-summernote.