• Home
  •  »
  •  » Super Simple WYSIWYG Editor

Super Simple WYSIWYG Editor

Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. An overview of summernote, how to download and use, basic features and examples, and more.

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

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) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/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.7.3/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.3/summernote.js"></script>

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


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() {
Example Website

Summernote   WYSIWYG