Get 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

Download source code

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

Clone or fork via Github

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

Install with Bower

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

bower install summernote

Installation

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>

Include js/css

Summernote uses open source libraries(jQuery, Bootstrap). Include the Following code in your HTML <HTML> tag

<!-- 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 summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.7/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.7/summernote.js"></script>

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

Fontawesome dependancy

After v0.8.0, You don’t have to include fontawesome for displaying summernote’s icon. But You can still use fontawesome for your custom icon. For more detail, please visit to custom button section.

Insert

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

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

Run summernote

Run the script below when document is ready!

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

Simple example

You can also test running example. Save below code as index.html and open it with your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <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> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.7/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.7/summernote.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>


Basic API

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 don’t set the height, editable area’s height will change according to contents.

press enter key.

Destroy

Destroy Summernote.

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

get & set Code

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

var markupStr = $('#summernote').summernote('code');

If you initialize multiple editor, You can get the HTML content of the second summernote with jQuery eq.

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

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

var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);

for more detail api: deep dive with api

destroy and code

After v0.7.0, direct jquery methods, destroy and code were removed for avoiding conflict with other jquery libraries. You can call this methods with summernote api.



i18n support

Language

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

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

<link href="summernote.css" rel="stylesheet">
<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

Integration

3rd parties available in django, rails, angular and so on.

Django

Handy update for your django admin page.

Ruby On Rails

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

AngularJS

AngularJS directive to Summernote.

Apache Wicket

Summernote widget for Wicket Bootstrap.

Webpack

Example about using summernote with webpack.

Meteor

Example about using summernote with meteor.