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.
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
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
});
Website: http://summernote.org/
examples: http://summernote.org/#/example
Documentation:http://summernote.org/jsduck/
Thanks for reading,
Web Editor