a52c2a8462
Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
4.5 KiB
Summernote
Super Simple WYSIWYG Editor on Bootstrap(3.0 and 2.x).
Summernote
Summernote is a javascript program that helps you to create WYSIWYG Editor on web.
Demo Page: http://hackerwins.github.io/summernote/
Why Summernote?
Summernote has something specials no like others.
Simple UI, Interative WYSIWYG editing, easy integrate Backend server and so much others.
Inspired by
- Gmail WYSIWYG Editor (http://www.gmail.com)
- Redactor (http://imperavi.com/redactor/)
Easy to install
Summernote uses opensouce libraries(jQuery, bootstrap, fontAwesome)
01. include js/css
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.0/css/bootstrap.no-icons.min.css" />
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" />
<!-- bootstrap v2.x
<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.
02. target elements
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>
03. summernote
Finally, run script after document ready.
$(document).ready(function() {
$('#summernote').summernote();
});
API
Get HTML code if you need.
var sHTML = $('#summernote').code();
Destroy summernote.
$('#summernote').destroy();
Dependencies
- jQuery: http://jquery.com/
- bootstrap: http://twitter.github.io/bootstrap/
- fontAwesome: https://github.com/FortAwesome/Font-Awesome
Supported platform
- Modern Browser (Safari, Chrome, Firefox, Opera, Internet Explorer 9+)
- OS (Windows, Mac)
Upcoming Features
- Air Mode
- Responsive Toolbar
- Table: Handles(Sizing, Selection) and Popover
v0.4 2013-10-01
- Support both Bootstrap 3.0 and 2.x
- support IE8
- Image Upload
- Fullscreen
Change Log
v0.3 2013-09-01
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)
v0.2, 2013-08-01
ADDEDundo/redoADDEDimage sizing handle and popoverADDEDsupport standalone cssADDEDsupport Multiple EditorREMOVEDjQuery.curstyles dependency
v0.1, 2013-07-01
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
for Hacker
structure of summernote.js
$.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
build summernote
# grunt-cli is need by grunt; you might have this installed already
npm install -g grunt-cli
npm install
grunt build
At this point, you should now have a build/ directory populated with everything you need to use summernote.
test summernote
run tests with PhantomJS
grunt test
Contacts
- Email: susukang98@gmail.com
- Twitter: http://twitter.com/hackerwins
License
summernote may be freely distributed under the MIT license.