Super Simple WYSIWYG Editor on Bootstrap(3.0 and 2.x).
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, bootstrap, fontAwesome)
Include Following code into <head> tag of your HTML:
<!-- include libries(jQuery, bootstrap, fontawesome) -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- bootstrap v3 -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" />
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<!-- 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/
- bootstrap: http://twitter.github.io/bootstrap (both 2.x and 3.x)
- fontAwesome: https://github.com/FortAwesome/Font-Awesome (both 3.x and 4.x)
- Modern Browser (Safari, Chrome, Firefox, Opera, Internet Explorer 9+)
- OS (Windows, Mac)
- Air Mode
- Responsive Toolbar
- Table: Handles(Sizing, Selection) and Popover
- support IE8
- Clipboard
- Media Object Selection
- Support both Font-Awesome 3.x and 4.x
- CodeMirror as Codeview
- Insert Video (by cdownie)
- Locale (by hendrismit, tschiela)
- Bug fixes
ADDEDSupport both Bootstrap 3.0 and 2.xADDEDFullscreenADDEDCode ViewADDEDImage Upload callback
FIXEDbugs(image upload, fontsize, tab, recent color, ...)ADDEDhelp dialog(keyboard shortcut)ADDEDinit options(event callbacks, custom toolbar)ADDEDresize barADDEDsupport IE8 Beta(some range bugs, can't insert Image)
ADDEDundo/redoADDEDimage sizing handle and popoverADDEDsupport standalone cssADDEDsupport Multiple EditorREMOVEDjQuery.curstyles dependency
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
$.extend - Renderer (Markup)
\ EventHandler - Editor - Range (W3CRange extention)
\ Style (Style Getter and Setter)
\ History (Store on jQuery.data)
\ Toolbar
\ Popover
\ Handle
\ Dialog
----------Common Utils----------
Dom, List, Func
# grunt-cli is need by grunt; you might have this installed already
npm install -g grunt-cli
npm install
grunt distAt this point, you should now have a build/ directory populated with everything you need to use summernote.
run tests with PhantomJS
grunt test- JSHint: http://www.jshint.com/about/
- JSHint rule: https://github.com/HackerWins/summernote/blob/master/.jshintrc
- Email: susukang98@gmail.com
- Twitter: http://twitter.com/hackerwins
summernote may be freely distributed under the MIT license.