Super simple WYSIWYG editor
Clone or download
Pull request Compare This branch is 293 commits behind summernote:develop.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
grunts
lang
meteor
plugin
src
test
tools
.agignore
.editorconfig
.gitignore
.jscsrc
.jshintignore
.jshintrc
.npmignore
.travis.yml
CONTRIBUTING.md
Gruntfile.js
LICENSE
MAINTAIN.md
README.md
bower.json
bs4.html
composer.json
ie8.html
index.html
issue_template.md
lite.html
nuget-build.cmd
package.json
pull_request_template.md
summernote.nuspec

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.