Skip to content

Latest commit

 

History

History
191 lines (151 loc) · 5.53 KB

README.md

File metadata and controls

191 lines (151 loc) · 5.53 KB
Raw

Summernote

Super Simple WYSIWYG Editor on Bootstrap(3.0 and 2.x).

Build Status Built with Grunt

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

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 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="//oss.maxcdn.com/summernote/0.5.1/summernote.css" rel="stylesheet">
<script src="//oss.maxcdn.com/summernote/0.5.1/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

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

Change Log

v0.5.1 2014-03-16

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

Contacts

License

summernote may be freely distributed under the MIT license.