# Summernote Super simple WYSIWYG Editor. [![Build Status](https://travis-ci.org/summernote/summernote.svg?branch=develop)](http://travis-ci.org/summernote/summernote) [![npm version](https://badge.fury.io/js/summernote.svg)](http://badge.fury.io/js/summernote) [![Dependency Status](https://gemnasium.com/summernote/summernote.svg)](https://gemnasium.com/summernote/summernote) [![Coverage Status](https://coveralls.io/repos/summernote/summernote/badge.svg?branch=develop&service=github)](https://coveralls.io/github/summernote/summernote?branch=develop) [![Sauce Test Status](https://saucelabs.com/browser-matrix/summernoteis.svg)](https://saucelabs.com/u/summernoteis) ### Summernote Summernote is a JavaScript library that helps you create WYSIWYG editors online. Home page: ### 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](http://jquery.com/), [Bootstrap](http://getbootstrap.com). For [Meteor](http://github.com/meteor/meteor), just run `meteor add summernote:summernote`. More info in the [Meteor README](meteor/README.md). Also there's an adaptation for React: [react-summernote](https://github.com/Vnkitaev/react-summernote) For other/no frameworks: #### 1. include JS/CSS Include the following code in the `` tag of your HTML: ```html ``` #### 2. target a element Then place a `div` tag somewhere in the `body` tag. This element will be replaced with the summernote editor. ```html

Hello Summernote

``` #### 3. summernote Finally, run this script after the DOM is ready: ```javascript $(document).ready(function() { $('#summernote').summernote(); }); ``` For more examples, please visit to [homepage](http://summernote.org/examples). ### API `code` - get the HTML source code underlying the text in the editor: ```javascript var html = $('#summernote').summernote('code'); ``` For more detail about API, please refer to [document](http://summernote.org/getting-started/#basic-api). #### Warning - code injection The code view allows the user to enter script contents. Make sure to filter/[sanitize the HTML on the server](https://github.com/search?l=JavaScript&q=sanitize+html). Otherwise, an attacker can inject arbitrary JavaScript code into clients. #### document structure ``` - body container:

, ,

,
- block node:
,
,
,
, - void block node:
- inline node: , , , , ... - void inline node: - text node: #text ``` 1. A body container has block node, but `
` has only `
` nodes. 2. A body container also has inline nodes sometimes. This inline nodes will be wraped with `
` when enter key pressed. 4. A block node only has inline nodes. 5. A inline nodes has another inline nodes 6. `#text` and void inline node doesn't have children. #### build summernote ```bash npm install # build full version of summernote: dist/summernote.js npm run build # generate minified copy: dist/summernote.min.js, dist/summernote.css npm run 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 ```bash npm 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 `npm 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. ```bash npm run start # 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 #### Contributing * Pull requests are welcome * Please don't include dist/* files on your commits. ### Contacts * Facebook user group: https://www.facebook.com/groups/summernote * Twitter: http://twitter.com/hackerwins ### License summernote may be freely distributed under the MIT license.