Super Simple Lightweight Editor For Web | Summernote

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

Why Summernote?

Summernote has some special features:

  • Paste images from the clipboard.
  • It saves images directly into the field content using base64 encoding, so you don’t need to perform image processing at all.
  • Simple user interface.
  • Interactive WYSIWYG Editing.
  • Easy integration with the server.
  • Supports Bootstrap 3, 4, and 5 integrations.
  • Lots of plug-ins and connectors are provided together.

Must Read: A Lightweight and Customizable WYSIWYG Editor In Pure JavaScript | SunEditor

How to make use of it:

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

<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//"></script>
<link rel="stylesheet" href="//[email protected]/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>

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

2. Then put the div tag somewhere in the body tag. This item will be replaced by the summary editor.

<div id="summernote">Hello Summernote</div>

3. Finally, run this script after the DOM is ready:

$(document).ready(function() {

4. Code – Get the underlying HTML source code in the text in the editor:

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


Flexible Angular Material WYSIWYG Rich Text Editor
Markdown WYSIWYG Editor | GFM Standard + Chart & UML Extensible
Minified jQuery WYSIWYG Contenteditable Editor Plugin | wysiwyg.js

See Demo And Download

Official Website(summernote): Click Here

This superior jQuery/javascript plugin is developed by summernote. For extra Advanced Usage, please go to the official website.