# Summernote — Simple WYSIWYG Rich Text Editor

> A lightweight jQuery and Bootstrap-based WYSIWYG editor that enables rich text editing with drag-and-drop images, tables, and code views in any web application.

## Install

Save in your project root:

# Summernote — Simple WYSIWYG Rich Text Editor

## Quick Use
```html
<link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-bs5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-bs5.min.js"></script>
<div id="editor"></div>
<script>$('#editor').summernote();</script>
```

## Introduction
Summernote is an open-source WYSIWYG editor built on top of jQuery and Bootstrap. It provides a clean toolbar for formatting text, inserting images via drag-and-drop, embedding videos, and editing raw HTML, making it a practical choice for CMS backends, admin panels, and content management forms.

## What Summernote Does
- Renders a rich text toolbar with bold, italic, lists, links, and heading controls
- Supports drag-and-drop and paste image upload with configurable callbacks
- Provides a code view toggle for direct HTML editing
- Offers an API for programmatic content manipulation and event hooks
- Works with Bootstrap 3, 4, and 5 or in a standalone Lite mode without Bootstrap

## Architecture Overview
Summernote attaches to a contentEditable div and intercepts user interactions through an event-driven module system. Each toolbar button maps to a module (e.g., style, image, link) that manipulates the DOM via document.execCommand or custom range-based operations. A plugin architecture allows third-party extensions to register custom buttons, dialogs, and behaviors.

## Self-Hosting and Configuration
- Include jQuery and Bootstrap CSS/JS, then add the Summernote CSS and JS files
- Initialize with `$(selector).summernote({ height: 300 })` and customize toolbar buttons
- Configure image upload callbacks via `onImageUpload` to send files to your server
- Use `summernote-lite` for a Bootstrap-free version with built-in styles
- Install plugins as separate JS files that hook into the module system

## Key Features
- Zero-config setup: a single line of JavaScript activates the editor
- Table creation and editing with row/column management
- Custom toolbar layout with configurable button groups
- Multilingual support with community-contributed language packs
- Extensible plugin ecosystem for features like emoji, math, and spell check

## Comparison with Similar Tools
- **TinyMCE** — more feature-rich with premium plugins but requires a license for advanced features; Summernote is fully open source
- **CKEditor 5** — modern block-based architecture with a steeper integration curve; Summernote is simpler to drop in
- **Quill** — framework-agnostic with a document model (Delta); Summernote stays closer to raw HTML
- **Tiptap** — headless editor built on ProseMirror; more flexible but requires building your own UI

## FAQ
**Q: Does Summernote require jQuery?**
A: Yes, Summernote depends on jQuery. The Lite build removes the Bootstrap dependency but still needs jQuery.

**Q: Can I customize the toolbar?**
A: Yes. Pass a `toolbar` array in the options to include only the button groups you need.

**Q: How do I handle image uploads server-side?**
A: Use the `onImageUpload` callback to intercept dropped or pasted images and send them to your API via AJAX, then insert the returned URL.

**Q: Is Summernote accessible?**
A: It provides basic keyboard shortcuts and ARIA attributes, though full WCAG compliance depends on your integration.

## Sources
- https://github.com/summernote/summernote
- https://summernote.org/

---
Source: https://tokrepo.com/en/workflows/asset-05e660fd
Author: AI Open Source