Super Simple WYSIWYG Editor on Bootstrap.
Summernote is a javascript program that helps you to create WYSIWYG Editor on web.
Demo Page: http://hackerwins.github.io/summernote/
Summernote has something specials no like others.
Simple UI, Interative WYSIWYG editing, easy integrate Backend server and so much others.
- Gmail WYSIWYG Editor (http://www.gmail.com)
- Redactor (http://imperavi.com/redactor/)
Summernote uses opensouce libraries(jquery, jquery.curstyles, bootstrap, fontAwesome)
Include Following code into <head> tag of your HTML:
<!-- include libries(jquery, jquery.curstyles, bootstrap, fontawesome) -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//v3.javascriptmvc.com/jquery/dist/jquery.curstyles.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<!-- include summernote css/js-->
<link rel="stylesheet" href="summernote.css" />
<script type="text/javascript" src="summernote.min.js"></script>If your summernote download is placed in a different folder, don't forget to change file's paths.
And place div tag to somewhere in the body tag. This element will be placed by the visual representation of the summernote.
<div id="summernote">Hello Summernote</div>Finally, run script after document ready.
$(document).ready(function() {
$('#summernote').summernote();
});Get HTML code if you need.
var sHTML = $('#summernote').code();Destroy summernote.
$('#summernote').destroy();- jQuery: http://jquery.com/
- jquery.curstyles: http://bitovi.com/blog/2010/06/get-multiple-computed-styles-fast-with-the-curstyles-jquery-plugin.html
- bootstrap: http://twitter.github.io/bootstrap/
- fontAwesome: https://github.com/FortAwesome/Font-Awesome
- Modern Browser (Safari, Chrome, Firefox, Opera, Internet Explorer 9+)
- OS (Windows, Mac)
- undo/redo
- image: sizing handle and popover
- support standalone css
- fileupload server integration
ADDEDfont style: size, color, bold, italic, underline, remove font styleADDEDpara style: bullet, align, outdent, indent, line heightADDEDimage: drag & drop, dialogADDEDlink: popover and dialogADDEDtable: create table with dimension picker
- Email: susukang98@gmail.com
- Twitter: http://twitter.com/susukang98
summernote may be freely distributed under the MIT license.