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)
- Restructuring: jQuery build pattern
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
summernote.js - Renderer.js (Generate markup) - Locale.js (Locale object)
ㄴEventHandler.js - Editor.js (Abstract editor)
ㄴStyle.js (Style Getter and Setter)
ㄴHistory.js (Store on jQuery.data)
ㄴToolbar.js (Toolbar module)
ㄴPopover.js (Popover module)
ㄴHandle.js (Handle module)
ㄴDialog.js (Dialog module)
-----------------------------Core Script-----------------------------
agent.js (agent information)
async.js (aysnc utility)
dom.js (dom functions)
list.js (list functions)
range.js (W3CRange extention)
---------------------------------------------------------------------
# grunt-cli is need by grunt; you might have this installed already
npm install -g grunt-cli
npm install
# build full version of summernote: dist/summernote.js
grunt build
# generate minified copy: dist/summernote.min.js, dist/summernote.css
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: [email protected]
- Twitter: http://twitter.com/hackerwins
summernote may be freely distributed under the MIT license.