Gallery block for Editor.js

Loader based on editor-js/image.

Preview

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 |