Summernote

Summernote – Super Simple WYSIWYG Editor on Bootstrap

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 latest 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 libraries(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();});

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});

Website: http://summernote.org/
examples: http://summernote.org/#/example
Documentation:http://summernote.org/jsduck/

Thanks for reading,
Nabeel Shahid.

Summernote – Super Simple WYSIWYG Editor on Bootstrap with keyboard shortcuts and themes