Download Summernote

Compiled CSS, JS

The fastest way to get Summernote is to download the precompiled and minified versions of our CSS, JavaScript. No documentation or original source code files are included.

Download compiled Summernote

Additional downloads

Download source code

Get the lastest Summernote LESS and Javascript source code by downloading it directly from GitHub.

Clone or fork via Github

Visit us on GitHub to clone or fork the summernote project.

Install with Bower

Install and manage Summernote's styles, JavaScript, and documentation using Bower.

bower install summernote

Installation

00. Requires HTML5 doctype

Bootstrap uses certain HTML elements and CSS properties which require HTML5 doctype. Include <!DOCTYPE html> in the beginning of all your projects.

<!DOCTYPE html>
<html lang="en">
...
</html>

01. Include js/css

Summernote uses open source libraries(jQuery, Bootstrap, font-awesome).

Include the Following code in your HTML <HTML> tag

<!-- include libries(jQuery, bootstrap, fontawesome) -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

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

Don't forget to change the file's path if you downloaded summernote in a different folders.

02. Insert

Add div into body; this targeted element will later be rendered to summernote editing tool.

<div id="summernote">Hello Summernote</div>

03. Run summernote

Run the script below when document is ready!

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

API

Summernote

Initialize Summernote

$('.summernote').summernote();

Initialize Summernote with options

Height and Focus

If you set focus option, cursor will focus editable area after initialize summernote.

$('.summernote').summernote({
  height: 300,                 // set editor height

  minHeight: null,             // set minimum height of editor
  maxHeight: null,             // set maximum height of editor

  focus: true,                 // set focus to editable area after initializing summernote
});

If you set height, you can see resizebar below.

blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~

If you doesn't set the height, editable area's height will change according to contents.

press enter key.
blah blah~
blah blah~

Custom toolbar

Summernote allows you to make own custom toolbar.

$('.summernote').summernote({
  toolbar: [
    //[groupname, [button list]]
     
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
  ]
});
This is a toolbar with font style only.

You can compose a toolbar with pre-shipped buttons.

Category Button id Function
Insert picture Insert a picture
link Insert a hyperlink
video Insert a video
table Insert a table
hr Insert a horizontal rule
Style style Format selected block
fontname Set font family
fontsize Set font size
color Set foreground and background color
bold Toggle weight
italic Toggle italic
underline Toggle underline
strikethrough Toggle strikethrough
clear Clearing all styles
Layout ul Make an un-ordered list
ol Make an ordered list
paragraph Set text alignment
height Set height of text
Misc fullscreen Toggle fullscreen editing mode
codeview Toggle wysiwyg and html editing mode
undo Undo
redo Redo
help Show help dialog

Custom Popover for Air-mode

Air-mode has its own popover, not toolbar. You can customize it with airPopover option.

$('.summernote').summernote({
  airPopover: [
    ['color', ['color']],
    ['font', ['bold', 'underline', 'clear']],
    ['para', ['ul', 'paragraph']],
    ['table', ['table']],
    ['insert', ['link', 'picture']]
  ]
});

Destroy

Destroy Summernote.

$('.summernote').destroy();

get & set Code

Get the HTML contents of the first summernote in the set of matched elements.

var sHTML = $('.summernote').code();

Get the HTML content of the second summernote with jQuery eq.

var sHTML = $('.summernote').eq(1).code();

A string of HTML to set as the content of each matched element.

$('.summernote').code(sHTML);

Callbacks

oninit

$('#summernote').summernote({
  oninit: function() {
    console.log('Summernote is launched');
  }
});

onenter

$('#summernote').summernote({
  onenter: function(e) {
    console.log('Enter/Return key pressed');
  }
});

onfocus

$('#summernote').summernote({
  onfocus: function(e) {
    console.log('Editable area is focused');
  }
});

onblur

$('#summernote').summernote({
  onblur: function(e) {
    console.log('Editable area loses focus');
  }
});

onkeyup

$('#summernote').summernote({
  onkeyup: function(e) {
    console.log('Key is released:', e.keyCode);
  }
});

onkeydown

$('#summernote').summernote({
  onkeydown: function(e) {
    console.log('Key is pressed:', e.keyCode);
  }
});

onpaste

$('#summernote').summernote({
  onpaste: function(e) {
    console.log('Called event paste');
  }
});

onImageUpload

Override image upload handler(default: base64 dataURL on `IMG` tag).

You can upload image to server or AWS S3: More....

$('#summernote').summernote({
  onImageUpload: function(files, editor, $editable) {
    console.log('image upload:', files, editor, $editable);
  }
});

onChange

  • IE9-10: DOMCharacterDataModified, DOMSubtreeModified, DOMNodeInserted
  • Chrome, FF: input
$('#summernote').summernote({
  onChange: function(contents, $editable) {
    console.log('onChange:', contents, $editable);
  }
});

I18n Support

Language

Include libraries with lang file. eg) summernote-ko-KR.js

<!-- include libries(jQuery, bootstrap, fontawesome) -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

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

<!-- include summernote-ko-KR -->
<script src="lang/summernote-ko-KR.js"></script>

Run the script with locale option.

$(document).ready(function() {
  $('#summernote').summernote({
    lang: 'ko-KR' // default: 'en-US'
  });
});

More summernote languages: languages

Server Integration

Examples with backend server.

PHP Form example php

PHP Form example with TEXTAREA.

node.js example nodejs

Some node.js examples.

nodejs


Django-summernote python

Handy update for your django admin page.

django

summernote-rails (gem) ruby

This gem was built to gemify the assets used in Summernote.

django

Keyboard shortcuts

We provide default shortcut.

Mac Windows
Undo + +
Redo + + +
Indent + +
Outdent + +
Toggle Bold + +
Toggle Italic + +
Toggle Underline + +
Toggle Strikethrough + + + +
Remove Font Style + +
Align Left + + + +
Align Center + + + +
Align Right + + + +
Justify Full + + + +
Ordered List + + + +
Unordered List + + + +
Normal Text + +
Heading 1 + +
Heading 2 + +
Heading 3 + +
Heading 4 + +
Insert Link + +
Insert Horizontal Rule + +