Skip to content
Super simple WYSIWYG editor
JavaScript CSS HTML
Branch: develop
Clone or download
Latest commit 27fb4cb Oct 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update PR Template Oct 18, 2019
config Add sourcemap to non-minimized files Jul 30, 2019
dist Update dist files with unintended omitted files Jul 30, 2019
examples change build system to webpack May 21, 2019
lang Update summernote-fa-IR.js Sep 14, 2019
plugin Allow trailing commas for multiline (#3055) Nov 29, 2018
src Modify fontStyling() Oct 18, 2019
test Fix LinkDialog.spec.js typo Aug 18, 2019
.agignore Add silver searcher ignore file. Sep 13, 2015
.editorconfig Add .editorconfig Dec 14, 2015
.eslintrc
.gitignore Merge branch 'develop' into init-nightwatch Oct 9, 2017
.npmignore ignore non-user files in npm and bower Dec 8, 2015
.travis.yml Remove sauce access key Aug 1, 2019
LICENSE add license Jul 11, 2016
MAINTAIN.md Update numbering on MAINTAIN.md Jul 25, 2019
README.md Fix a broken link. May 16, 2019
index.html change build system to webpack May 21, 2019
karma.ci.conf.js Change browser list of karma.ci.conf.js Aug 15, 2019
karma.conf.js Add karma-detect-browsers Aug 15, 2019
package.json Add test:grep command to package.json Aug 18, 2019
postcss.config.js change build system to webpack May 21, 2019
tsconfig.json Support js and ts. Dec 25, 2017

README.md

Summernote

Super simple WYSIWYG Editor.

Build Status npm version Coverage Status

Summernote

Summernote is a JavaScript library that helps you create WYSIWYG editors online.

Home page: https://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
  • Supports Bootstrap 3 and 4 integrities
  • Lots of plugins and connectors provided together

Installation and dependencies

Summernote is built on jQuery.

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 it!

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/.github/CONTRIBUTING.md

Contacts

License

Summernote may be freely distributed under the MIT license.

You can’t perform that action at this time.