Image Gallery Tool with source field for Editor.js
npm install @kiberpro/editorjs-gallery
shell
$ npm i @kiberpro/editorjs-gallery
`
Include module at your application
`javascript
import ImageGallery from '@kiberpro/editorjs-gallery';
`
$3
You can load a specific version of the package from jsDelivr CDN.
Require this script on a page with Editor.js.
`html
`
$3
1. Upload folder dist from repository
2. Add dist/gallery.umd.js file to your page.
$3
To enable sorting, include the SortableJS library and send it to the configuration:
`shell
$ npm i sortablejs
`
`javascript
import Sortable from 'sortablejs';
`
Usage
`javascript
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:
`javascript
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 |