mirror of https://github.com/LaCasemate/fab-manager.git synced 2024-12-02 13:24:20 +01:00

History

cyril d1450f65f6 release 2.0 rc		2016-03-23 18:39:41 +01:00
..
dist	release 2.0 rc	2016-03-23 18:39:41 +01:00
examples	release 2.0 rc	2016-03-23 18:39:41 +01:00
lang	release 2.0 rc	2016-03-23 18:39:41 +01:00
meteor	improves wysiwyg editor projects	2015-05-13 18:30:35 +02:00
plugin	release 2.0 rc	2016-03-23 18:39:41 +01:00
src	release 2.0 rc	2016-03-23 18:39:41 +01:00
.bower.json	release 2.0 rc	2016-03-23 18:39:41 +01:00
bower.json	release 2.0 rc	2016-03-23 18:39:41 +01:00
composer.json	improves wysiwyg editor projects	2015-05-13 18:30:35 +02:00
CONTRIBUTING.md	release 2.0 rc	2016-03-23 18:39:41 +01:00
ie8.html	release 2.0 rc	2016-03-23 18:39:41 +01:00
index.html	release 2.0 rc	2016-03-23 18:39:41 +01:00
lite.html	release 2.0 rc	2016-03-23 18:39:41 +01:00
package.json	release 2.0 rc	2016-03-23 18:39:41 +01:00
README.md	release 2.0 rc	2016-03-23 18:39:41 +01:00

README.md

Summernote

Super simple WYSIWYG Editor.

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

Installation and dependencies

Summernote uses opensource 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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.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 html = $('#summernote').summernote('code');

Destroy summernote:

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

Warning - code injection

The code view allows the user to enter script contents. Make sure to filter/sanitize the HTML on the server. Otherwise, an attacker can inject arbitrary JavaScript code into clients.

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

document structure

 - body container: <div class="note-editable">, <td>, <blockquote>, <ul>
 - block node: <div>, <p>, <li>, <h1>, <table>
 - void block node: <hr>
 - inline node: <span>, <b>, <font>, <a>, ...
 - void inline node: <img>
 - text node: #text

A body container has block node, but <ul> has only <li> nodes.
A body container also has inline nodes sometimes. This inline nodes will be wraped with <p> when enter key pressed.
A block node only has inline nodes.
A inline nodes has another inline nodes
#text and void inline node doesn't have children.

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 Karma and PhantomJS

grunt test

If you want run tests on other browser, change the values for broswers properties in Gruntfile.js.

karma: {
  all: {
    browsers: ['PhantomJS'],
    reporters: ['progress']
  }
}

You can use Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS and IE beside PhantomJS. Once you run grunt test, it will watch all javascript file. Therefore karma run tests every time you chage code.

start local server for developing summernote.

run local server with connect and watch.

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

Coding convention

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

Contribution guide

Please read CONTRIBUTING.md before sending pull requests.

Contacts

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

License

summernote may be freely distributed under the MIT license.