Giters

nolboo / summernote

Super Simple WYSIWYG Editor on Bootstrap

Home Page:http://hackerwins.github.io/summernote/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Summernote

Super Simple WYSIWYG Editor on Bootstrap.

Build Status

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

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

Supported platform

  • Modern Browser (Safari, Chrome, Firefox, Opera, Internet Explorer 9+)
  • OS (Windows, Mac)

Upcoming Features

  • Table: Handles(Sizing, Selection) and Popover
  • Responsive Toolbar
  • API for Callbacks

Change Log

v0.2, 2013-08-01

  • ADDED undo/redo
  • ADDED image sizing handle and popover
  • ADDED support standalone css
  • ADDED support Multiple Editor
  • REMOVED jQuery.curstyles dependency

v0.1, 2013-07-01

  • ADDED font style: size, color, bold, italic, underline, remove font style
  • ADDED para style: bullet, align, outdent, indent, line height
  • ADDED image: drag & drop, dialog
  • ADDED link: popover and dialog
  • ADDED table: 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

License

summernote may be freely distributed under the MIT license.

About

Super Simple WYSIWYG Editor on Bootstrap

http://hackerwins.github.io/summernote/