Summernoteとは？jQuery WYSIWYG Editor

ページ内ナビ

概要

Summernote 0.9.1はjQuery上に構築されたWYSIWYG editorです。toolbar editing、link/image/video、table、code view、HTML取得APIを提供し、Bootstrap 3/4/5向けstyleを選択して既存formへrich text editingを追加できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

divをWYSIWYG editorへ変換してtoolbar編集を提供する

READMEはjQueryとSummernoteのJS/CSSを読み込み、対象elementへ.summernote()を呼ぶ基本手順を示しています。

出典：[1]

Bootstrap 3・4・5向けintegrationを選べる

READMEはBootstrap 3、4、5 compatibilityを掲げ、source treeには各version向けstyle/rendererが分かれて用意されています。

出典：[1][3]

editor contentをHTMLとしてAPIから取得する

.summernote('code')からeditor内部のHTML sourceを取得でき、application側の保存処理へ接続できます。

出典：[1]

向いている用途

既存jQuery/Bootstrap formへrich text入力を追加したい場合に向く

独立editor applicationを導入せず、既存form fieldの一部をWYSIWYG化したい管理画面やCMS UIに適します。

出典：[1]

導入前の確認

code view入力はserver-side sanitizationが必要である

READMEはcode viewからscript contentを入力できるため、server側でHTMLをfilter/sanitizeしないとclientへarbitrary JavaScriptをinjectされ得ると警告しています。

出典：[1]

0.9.1 packageはNode >=17をengineとして定義する

package metadataはNode >=17.0.0をengineとして定義しています。build/toolingを扱う場合はNode versionも確認してください。

出典：[2]

参考にした公式資料

[1]Summernote 0.9.1 README(2026-10-05)
[2]Summernote 0.9.1 package metadata(2026-10-05)
[3]Summernote Bootstrap style integrations(2026-10-05)
[4]Summernote 0.9.1 release(2026-10-05)
[5]Summernote MIT license(2026-10-05)

編集部からの補足

SummernoteはjQuery上に構築されています。code viewではscriptを含むHTMLを入力できるため、READMEが警告するとおり保存・配信前にserver-sideでHTMLをsanitizeしてください。client側editorだけをXSS対策にしないでください。

3ステップで試す

1
Summernote 0.9.1とREADME準拠のjQuery・Bootstrapを導入する
READMEのBootstrap 5 exampleに合わせてreview対象Summernoteと依存UI libraryを一時projectへ導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/summernote.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact summernote@0.9.1 jquery@3.6.0 bootstrap@5.0.2
2
Summernote package versionを確認する
導入したSummernoteがreview対象versionであることを確認します。
test "$(node -e "console.log(require('./node_modules/summernote/package.json').version)")" = '0.9.1'
3
Bootstrap 5向けdistributionを確認する
browserを起動せず、Bootstrap 5向けJavaScript/CSS distributionがnpm packageに含まれることを確認します。
test -f node_modules/summernote/dist/summernote-bs5.js && test -f node_modules/summernote/dist/summernote-bs5.css

公式READMEで確認

成長

成長の推移 · 直近30日

11,844 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 30

開発アクティビティを蓄積中です。

Built with

JavaScript

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

summernote
wysiwyg-editor
javascript
wysiwyg

Stars: 11,844
Forks: 2,253
Watchers: 294
Open Issues: 96
Contributors: 308
所有者種別: Organization
主要言語: JavaScript
ライセンス: MIT
リポジトリ最終更新: 2026/04/15

概要

特徴と向いている用途

主な特徴

divをWYSIWYG editorへ変換してtoolbar編集を提供する

Bootstrap 3・4・5向けintegrationを選べる

editor contentをHTMLとしてAPIから取得する

向いている用途

既存jQuery/Bootstrap formへrich text入力を追加したい場合に向く

導入前の確認

code view入力はserver-side sanitizationが必要である

0.9.1 packageはNode >=17をengineとして定義する

参考にした公式資料

3ステップで試す

Summernote 0.9.1とREADME準拠のjQuery・Bootstrapを導入する

Summernote package versionを確認する

Bootstrap 5向けdistributionを確認する

成長

開発アクティビティ

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪