Super simple WYSIWYG editor
JavaScript CSS Other
Latest commit 4822986 Oct 6, 2016 @hackerwins hackerwins committed on GitHub Merge pull request #2090 from temuujina/patch-2
Mongolian translation version
Permalink
Failed to load latest commit information.
dist Update dist files Aug 7, 2016
examples Remove font-awesome. Jan 24, 2016
grunts Fixed #1522. Dec 20, 2015
lang Mongolian translation version Oct 5, 2016
meteor Update dist files with v0.8.1 Feb 15, 2016
plugin added basic data plugin Mar 17, 2016
src Merge pull request #1978 from avif/bugfix/#1977 Aug 7, 2016
test Merge pull request #1978 from avif/bugfix/#1977 Aug 7, 2016
tools Add .nuspec for NuGet packaging Jul 12, 2016
.agignore Add silver searcher ignore file. Sep 13, 2015
.editorconfig Add .editorconfig Dec 14, 2015
.gitignore Add .nuspec for NuGet packaging Jul 12, 2016
.jscsrc Added test files for lint and fixed error. Jan 28, 2016
.jshintignore Implements summernote-lite toolbar and editor. Aug 27, 2015
.jshintrc Fixed #1415. Nov 7, 2015
.npmignore ignore non-user files in npm and bower Dec 8, 2015
.travis.yml Update node version for testing travis. Apr 10, 2016
Gruntfile.js Comment out Edge Jul 18, 2016
LICENSE add license Jul 11, 2016
MAINTAIN.md Update MAINTAIN.md Feb 17, 2016
README.md move location for react-summernote Jul 9, 2016
bower.json Remove font-awesome. Jan 24, 2016
composer.json Update repository and homepage. Jan 31, 2015
ie8.html Remove font-awesome. Jan 24, 2016
index.html Remove font-awesome. Jan 24, 2016
issue_template.md add templates for issue/PR Feb 17, 2016
lite.html Add page label. Aug 30, 2015
nuget-build.cmd Update .nuspec to fall back locating content files Jul 12, 2016
package.json Update version for next release Mar 13, 2016
pull_request_template.md add templates for issue/PR Feb 17, 2016
summernote.nuspec Update .nuspec to fall back locating content files Jul 12, 2016

README.md

Summernote

Super simple WYSIWYG Editor.

Build Status npm version Dependency Status Coverage Status

Sauce Test 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

Installation and dependencies

Summernote uses opensource libraries: jQuery, Bootstrap.

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

Also there's an adaptation for React: react-summernote

For other/no frameworks:

1. include JS/CSS

Include the following code in the <head> tag of your HTML:

<!-- include libraries(jQuery, bootstrap) -->
<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>

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.js"></script>

2. target a element

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();
});

For more examples, please visit to homepage.

API

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

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

For more detail about API, please refer to document.

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.

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
  1. A body container has block node, but <ul> has only <li> nodes.
  2. A body container also has inline nodes sometimes. This inline nodes will be wraped with <p> when enter key pressed.
  3. A block node only has inline nodes.
  4. A inline nodes has another inline nodes
  5. #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

Contribution guide

Contacts

License

summernote may be freely distributed under the MIT license.