Skip to content

Gallery block for Editor.js with multi-loading and sorting

License

Notifications You must be signed in to change notification settings

VolgaIgor/editorjs-gallery

Repository files navigation

Gallery block for Editor.js

Loader based on editor-js/image.

Preview

Preview image

Features

  • Multiple downloads
  • Sorting uploaded images (providing by SortableJS)
  • Limit the number of images
  • Two view selector (slider and fit)

Installation

Install via NPM

Get the package

$ npm i @kiberpro/editorjs-gallery

Include module at your application

import ImageGallery from '@kiberpro/editorjs-gallery';

Load from CDN

You can load a specific version of the package from jsDelivr CDN.

Require this script on a page with Editor.js.

<script src="https://cdn.jsdelivr.net/npm/@kiberpro/editorjs-gallery"></script>

Download to your project's source dir

  1. Upload folder dist from repository
  2. Add dist/gallery.umd.js file to your page.

Enable sorting

To enable sorting, include the SortableJS library and send it to the configuration:

$ npm i sortablejs
import Sortable from 'sortablejs';

Usage

var editor = EditorJS({
  // ...
  tools: {
    // ...
    gallery: {
      class: ImageGallery,
      config: {
        sortableJs: Sortable,
        endpoints: {
          byFile: 'http://localhost:8008/uploadFile',
        }
      },
    },
  }
  // ...
});

Config Params

Gallery block supports these configuration parameters:

Field Type Description
sortableJs object SortableJS library
maxElementCount int (default: undefined) Maximum allowed number of images
buttonContent string (default: Select an Image) Label for upload button
uploader {{uploadByFile: function}} Optional custom uploading method. See details.
actions [{name: string, icon: string, title: string}] Array with custom switches
And others from the original

Also you can add a localized string:

new Editorjs({
  // ...
  tools: {
    gallery: ImageGallery
  },
  i18n: {
    tools: {
      gallery: {
        'Select an Image': 'Выберите изображение',
        'Delete': 'Удалить',
        'Gallery caption': 'Подпись'
      }
    }
  },
})

Output data

This Tool returns data with following format

Field Type Description
files object[] Uploaded file datas. Any data got from backend uploader. Always contain the url property
source string image's source
style string (fit of slider) gallery view