mirror of https://github.com/cwinfo/powerdns-admin.git synced 2025-01-06 18:35:40 +00:00

History

Khanh Ngo 2dac8205f6 Initial commit		2015-12-13 16:34:12 +07:00
..
lang	Initial commit	2015-12-13 16:34:12 +07:00
README.md	Initial commit	2015-12-13 16:34:12 +07:00
summernote.css	Initial commit	2015-12-13 16:34:12 +07:00
summernote.js	Initial commit	2015-12-13 16:34:12 +07:00
summernote.min.js	Initial commit	2015-12-13 16:34:12 +07:00

README.md

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.

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

Why Summernote?

Summernote has something specials no like others.

Simple UI
Interative WYSIWYG editing
Handy integration with server

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 libraries(jQuery, bootstrap, fontawesome) -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script 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://getbootstrap.com (both 2.x and 3.x)
fontAwesome: https://github.com/FortAwesome/Font-Awesome (both 3.x and 4.x)

Supported platform

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

Upcoming Features

Responsive Toolbar
Table: Handles(Sizing, Selection) and Popover
support IE8
Clipboard
Media Object Selection

Change Log

v0.5.9 2014-09-21

Dom Editing: insert(Un)OrderedList, indent/outdent
History in a line.

v0.5.8 2014-08-31

Remove autoFormatRange option
Fixed onChange issues

v0.5.7 ~ v0.5.4 2014-08-29 ~ 2014-08-23

Dom editing: insertPara, insertNode

v0.5.3 2014-07-25

Extract codemirror.autoFormatOnStart option
Bug patch (createLink)

v0.5.2 2014-07-20

Air Mode
And bug patch (scroll, createLink, ...)

v0.5.1 2014-03-16

Support 15 Languages(https://github.com/HackerWins/summernote/tree/master/lang)
Add local-server for develop summernote.
Font style: Font-Family
And Bug patch.

v0.5 2013-12-29

Support both Font-Awesome 3.x and 4.x
CodeMirror as Codeview
Insert Video (by cdownie)
Support 5 Languages(by hendrismit, tschiela, inomies, cverond)
Restructuring: jQuery build pattern

v0.4 2013-11-01

Support both Bootstrap 3.0 and 2.x
Fullscreen
Codeview
Image Upload callback

v0.3 2013-09-01

Bugs(image upload, fontsize, tab, recent color, ...)
Help dialog(keyboard shortcut)
Init options(event callbacks, custom toolbar)
Resize bar
Support IE8 Beta(some range bugs, can't insert Image)

v0.2, 2013-08-01

Undo/Redo
Image sizing handle and popover
Support standalone css
Support Multiple Editor
Remove jQuery.curstyles dependency

v0.1, 2013-07-01

Font style: size, color, bold, italic, underline, remove font style
Para style: bullet, align, outdent, indent, line height
Image: drag & drop, dialog
Link: popover and dialog
Table: create table with dimension picker

for Hacker

structure of summernote.js

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)
  key.js    (keycode object)
  dom.js    (dom functions)
  list.js   (list functions)
  range.js  (W3CRange extention)
---------------------------------------------------------------------

build summernote

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

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

start local server for developing summernote.

run local server with connect and watch.

# this will open a browser on http://localhost:3000.
grunt server
# If you change source code, automatically reload your page.

Coding convention

JSHint: http://www.jshint.com/about/
JSHint rule: https://github.com/HackerWins/summernote/blob/master/.jshintrc

Contacts

Email: susukang98@gmail.com
Twitter: http://twitter.com/hackerwins

License

summernote may be freely distributed under the MIT license.