Summernote Gallery

Summernote Gallery is a standalone Summernote plugin that opens a Bootstrap modal gallery for selecting one or more server-hosted images and inserting their real URLs into the editor instead of embedding base64 data.

What is Summernote Gallery?

Summernote Gallery is a plugin for the Summernote WYSIWYG editor, tested against Summernote 0.8.18 with Bootstrap 3 in its maintained demo. It provides a gallery dialog that browses image records loaded from a remote API or from a local array, and when the user selects images it inserts the server URLs directly into the editable area. The project lives under the eissasoubhi GitHub namespace and is one of the official plugin candidates for the Summernote Bricks composition system, though Gallery works standalone and does not require Summernote Bricks to function.

Key Features

The plugin combines a configurable data source, pagination, and a Bootstrap modal into a compact Summernote extension.

• Server-hosted image URLs — images are inserted as real url values instead of base64 payloads, keeping the editor content compact and avoiding database bloat.
• Configurable API response paths — source.responseDataKey and source.nextPageKey let you point to the image array and the next-page link in any JSON response using dot notation, such as data and links.next.
• Pagination and infinite scroll — set modal.loadOnScroll to true to automatically fetch the next page when the user scrolls near the bottom; the next-page URL is taken from the configured nextPageKey.
• Custom source formatting — the source.formater function normalizes an existing API response into the expected id, url, title record shape without changing the server output.
• Select-all and deselect-all — the modal includes controls to select all currently loaded images or clear the selection before adding them to the editor.
• Multiple image selection — users can choose one or more images in a single modal session and insert them all in one action.
• Standalone and composable — the plugin works as a toolbar button on its own, and can also be composed through the Summernote Bricks shared SNB runtime.
• Published as a dual package — npm distribution includes both a module entry at dist/module/index.js and a minified browser bundle at dist/snb-gallery-brick.min.js.

Who is it for?

The plugin targets developers who run Summernote and need to source images from their own servers.

• Developers building admin panels or CMS editor experiences — they can embed a Summernote editor, add a summernoteGallery toolbar button, and let content editors pick images from their own media endpoint without publishing base64 blobs.
• Teams with existing media APIs — because responseDataKey, nextPageKey, and formater are configurable, the plugin adapts to APIs that use field names like uuid, publicUrl, and name instead of the default id, url, and title.
• Summernote users who want a focused image picker — the plugin delivers a simple Bootstrap modal gallery with pagination and selection state, without forcing a heavy media-manager framework into the page.

What can you do with Summernote Gallery?

These are the concrete workflows the plugin supports out of the box.

• Wire a gallery button into the Summernote toolbar — configure toolbar with ['extensions', ['summernoteGallery']] and set summernoteGallery.source.url to an endpoint that returns a JSON array of image records.
• Keep the editor output database-friendly — select images from a server endpoint and the modal inserts their URLs, so the stored editing content stays small and the images remain cacheable on your CDN or origin.
• Normalize a legacy media API on the client — use source.formater to map /api/media items that use uuid and publicUrl into the id and url the Gallery expects, without asking the backend team to change the response shape.
• Create a scroll-driven image browser — set source.nextPageKey to the response path containing the next-page URL and modal.loadOnScroll to true, and the modal will keep loading additional pages as the user scrolls.

How does Summernote Gallery work?

Clicking the Gallery toolbar button opens a Bootstrap 3 modal that reads either the inline source.data array or fetches from source.url. The response is parsed with responseDataKey to extract the image records and nextPageKey to locate the next page URL. When the user selects one or more images and clicks the Add button, the plugin inserts the url values into the Summernote editable area. If modal.loadOnScroll is enabled, the next batch is requested as the modal scroll position approaches the bottom.

Pros and cons

The main trade-offs are visible from the documented integration defaults and roadmap.

• Pro: keeps editor HTML lean by storing server-hosted URLs instead of base64-encoded image data.
• Pro: works with an inline data array for offline or static demos, and with any REST endpoint whose response can be reshaped via formater.
• Pro: provides select-all, deselect-all, and infinite-scroll controls that the default Summernote image dialog does not offer.
• Con: the only verified browser integration is Summernote 0.8.18 with Bootstrap 3; Bootstrap 5 compatibility is listed on the roadmap and should not be assumed until the shared SNB modal runtime is updated.

Alternatives

Outside of this plugin, Summernote's built-in image dialog is the closest default option.

• Summernote's built-in image dialog, which supports inserting a single image URL but lacks multi-select, pagination, and configurable API response paths.

FAQ

Is Summernote Gallery free?

Yes. The repository is released under the MIT license, and the npm package can be installed with npm install summernote-gallery.

Does Summernote Gallery work with Bootstrap 5?

Not yet. The project explicitly states that Bootstrap 5 must not be advertised as supported until the shared SNB modal runtime no longer relies exclusively on Bootstrap's jQuery modal API. The maintained demo uses Bootstrap 3.4.1 and Summernote 0.8.18.

How do I install Summernote Gallery?

Run npm install summernote-gallery, then load jQuery, Bootstrap, Summernote, and the dist/snb-gallery-brick.min.js bundle in order. The plugin can also be imported as a module from dist/module/index.js in a bundler-based setup.

Can I use my own API with a different JSON structure?

Yes. Use source.responseDataKey and source.nextPageKey with dot notation to point to the image records and the next-page URL, or provide a source.formater function to convert the API response into id, url, title records.

Does Gallery embed base64 in the editor?

No. The plugin's core purpose is to keep server-hosted URLs instead of base64 payloads, so the editor output remains compact and the images reference your server or CDN.