/summernote

Super simple WYSIWYG editor
  1. JavaScript 86.9%
  2. CSS 12.0%
  3. Other 1.1%
JavaScript CSS Other
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Download ZIP
Find file
Switch branches/tags
Nothing to show
Latest commit e5851dc Nov 4, 2017 @hackerwins hackerwins Merge pull request #2527 from DiemenDesign/develop 
Add Image popover enhancements.
Permalink
Failed to load latest commit information.
examples Merge branch 'develop' into bugfix/fontname-with-space Oct 10, 2017
grunts Recover build and test in rollup. Oct 3, 2017
lang Updated romanian translation Oct 14, 2017
meteor Update dist files with v0.8.1 Feb 15, 2016
plugin Replace jshint, jscs with eslint. Oct 4, 2017
src Merge pull request #2527 from DiemenDesign/develop Nov 4, 2017
test fix exit code error during e2e tests Oct 19, 2017
tools Add .nuspec for NuGet packaging Jul 12, 2016
.agignore Add silver searcher ignore file. Sep 13, 2015
.editorconfig Add .editorconfig Dec 14, 2015
.eslintrc Replace jshint, jscs with eslint. Oct 4, 2017
.gitignore Merge branch 'develop' into init-nightwatch Oct 9, 2017
.npmignore ignore non-user files in npm and bower Dec 8, 2015
.travis.yml fix exit code error during e2e tests Oct 19, 2017
CONTRIBUTING.md Fix typo. Oct 10, 2017
Gruntfile.js Replace jshint, jscs with eslint. Oct 4, 2017
ISSUE_TEMPLATE.md Fix typo. Oct 10, 2017
LICENSE add license Jul 11, 2016
MAINTAIN.md Update MAINTAIN.md Feb 17, 2016
PULL_REQUEST_TEMPLATE.md Fix typo. Oct 10, 2017
README.md Update README.md Sep 16, 2017
bower.json Fix errors on build. Oct 1, 2017
bs4.html Merge branch 'develop' of https://github.com/Cerealkillerway/summernote… Oct 10, 2017
composer.json Fix errors on build. Oct 1, 2017
index.html Replace requirejs and es5 with rollup and es6. Oct 1, 2017
karma.conf.js Recover build and test in rollup. Oct 3, 2017
lite.html Replace requirejs and es5 with rollup and es6. Oct 1, 2017
nuget-build.cmd Update .nuspec to fall back locating content files Jul 12, 2016
package.json fix exit code error during e2e tests Oct 19, 2017
summernote.nuspec Update .nuspec to fall back locating content files Jul 12, 2016
tsconfig.json Replace jshint, jscs with eslint. Oct 4, 2017

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/3.2.1/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.

For contributing

https://github.com/summernote/summernote/blob/develop/CONTRIBUTING.md

Contacts

License

Summernote may be freely distributed under the MIT license.