Skip to content

Xportability/summernote

 
 

Repository files navigation

Summernote

Super simple WYSIWYG Editor using Bootstrap (3.0 and 2.x).

Build Status

Summernote

Summernote is a JavaScript library that helps you create WYSIWYG editors online.

Home Page: http://summernote.org

Why Summernote?

Summernote has a few special features:

  • Paste images from clipboard
  • Saves images directly in the content of the field using base64 encoding, so you don't need to implement image handling at all
  • Simple UI
  • Interactive WYSIWYG editing
  • Handy integration with server

Inspired by

Installation and dependencies

Summernote uses opensouce libraries: jQuery, Bootstrap, Font Awesome.

For Meteor, just run meteor add summernote:summernote. More info in the Meteor README.

For other/no frameworks:

1. include JS/CSS

Include the following code in the <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>

2. target elements

Then place a div tag somewhere in the body tag. This element will be replaced with the summernote editor.

<div id="summernote">Hello Summernote</div>

3. summernote

Finally, run this script after the DOM is ready:

$(document).ready(function() {
  $('#summernote').summernote();
});

API

code - get the HTML source code underlying the text in the editor:

var sHTML = $('#summernote').code();

Destroy summernote:

$('#summernote').destroy();

Supported platforms

Any modern browser: Safari, Chrome, Firefox, Opera, Internet Explorer 9+.

Upcoming Features

  • Responsive toolbar
  • Table: Handles (sizing, selection) and popover
  • IE8 Support
  • Clipboard (you can paste images already)
  • Media object selection

Developer information

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
# install project dependencies
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.

About

Super simple WYSIWYG Editor using Bootstrap

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 69.1%
  • CSS 30.7%
  • Shell 0.2%