0.1.2 • Published 6d ago

@fluxfiles/summernote

Licence

MIT

Version

0.1.2

Deps

Size

15 kB

Vulns

Weekly

Stars

Summary Dependency Versions

FluxFiles — Summernote Plugin

Adds a FluxFiles toolbar button to Summernote for browsing and inserting files.

Requirements

jQuery + Summernote loaded before this plugin.
A running FluxFiles core server (the PHP backend / standalone app in packages/core). This plugin is only the editor button — it loads the FluxFiles SDK (fluxfiles.js) from that server and the endpoint option must point at it.

Installation

npm install @fluxfiles/summernote

Summernote plugins are loaded as a <script> after Summernote itself, so make plugin.js reachable — reference it from node_modules/@fluxfiles/summernote/plugin.js, copy the folder next to your Summernote assets, or load it from a CDN:

<!-- jQuery, then Summernote, then the FluxFiles SDK + this plugin -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-lite.min.js"></script>

<script src="https://your-fluxfiles-host/fluxfiles.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluxfiles/summernote/plugin.min.js"></script>

A minified plugin.min.js ships alongside the source (CDN unpkg/jsdelivr resolve to it); regenerate with npm run build (esbuild).

Usage

Add 'fluxfiles' to a toolbar group and pass a fluxfiles options object:

$('#editor').summernote({
    toolbar: [
        ['style', ['bold', 'italic', 'underline']],
        ['insert', ['fluxfiles', 'link']]
    ],
    fluxfiles: {
        endpoint: 'https://your-fluxfiles-host',
        token: 'JWT_TOKEN',
        disk: 'local',
        locale: 'en',
        multiple: false
    }
});

How It Works

Click the FluxFiles toolbar button (folder/browse icon).
The FluxFiles picker opens as a modal overlay.
Select a file — images are inserted as <img> (with alt from the file's metadata and width/height when known), other files as <a> links — via Summernote's editor.pasteHTML. The plugin saves the editing range when the picker opens and restores it before inserting, so content lands at your original cursor (not at the start of the document).
The modal closes automatically after selection.

Console note. Summernote-lite's own popover/handle code may intermittently log a Cannot read properties of undefined (reading 'top') while the modal has focus. It originates inside summernote-lite.min.js (not this plugin) and is harmless — selection and insertion work normally.

Native image dialog. Unlike CKEditor 4 and TinyMCE — whose built-in Insert/Edit Image dialogs expose a "Browse Server" / file_picker_callback hook that the FluxFiles plugin wires into — Summernote's image dialog has no such hook (it only offers an upload field and a URL field). So on Summernote the FluxFiles toolbar button is the integration point; it inserts the image with alt/width/height already set from the file's metadata.

Embedding & expiring URLs. On a private disk the file URL is a presigned URL that expires (≤ 24h) — embedding it in saved content will break once it expires (the plugin logs a console.warn). For editor embeds use a public disk or a public_url so the inserted URL is permanent. The plugin already prefers permanent_url automatically when present.

Configuration

The plugin reads a single fluxfiles options object:

Option	Type	Default	Description
`endpoint`	string	`''`	FluxFiles server URL
`token`	string	`''`	JWT authentication token
`disk`	string	`'local'`	Storage disk
`disks`	string[]	`null`	Disks shown in the picker sidebar
`locale`	string	`null`	UI language code
`theme`	string	`null`	Picker theme: `light` / `dark` / `auto`
`multiple`	boolean	`false`	Allow multi-file selection
`maxUploadMb`	number	`null`	Per-file upload limit hint
`maxFiles`	number	`null`	Max files hint

License

MIT — see LICENSE for details.