npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vtchinh/gallery-editorjs

v1.2.3

Published

Image Tool for Editor.js

Downloads

671

Readme

Carousel Tool

Gallery with custom column for Editor.js.

Inspired from mr8bit/carousel-editorjs

Features

  • Uploading file from the device
  • Preload image
  • Change the image position
  • Toggle the gallery style ([standard, carousel, masonry] are included)
  • Column settings
  • Remove Image From Server

Installation

npm i @vtchinh/gallery-editorjs

Manual downloading and connecting

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

Usage

Add a new Tool to the tools property of the Editor.js initial config.

import Carousel from 'Carousel';

// or if you inject ImageTool via standalone script
const Carousel = window.Carousel;
 
var editor = EditorJS({
  ...

  tools: {
    ...
    carousel: {
        class: Carousel,
        config: {
            endpoints: {
                byFile: "URL_FETCH",
                removeImage: "URL_FETCH", //default null
            },
            additionalRequestHeaders: {
                'authorization': 'Bearer eyJhbGciJ9...TJVA95OrM7h7HgQ',
                // ...
            },
            field: 'image',
            types: 'image/*',
            additionalRequestData: { // for custom data
                name: 'your custom data name',
                order_data: 'your order custom data',
            },
            galleryCallback: 'your_prefer_callback_data' // object return is required
        }
    },
  }
  ...
});

function your_prefer_callback_data() {
  return {'key': 'value'};
}

For removeImage configuration, all you need is providing a request for POST['image'] key. Don't forget to put csrf-token meta as something like <meta name="csrf-token" content="{{ csrf_token }}"> to your <head>

Change Log

All notable changes to this project will be documented in this file.

[1.2.3] - 2022-07-13

Added

  • Add some styles for fixing the image size.

[1.2.2] - 2022-06-14

Now we can have more custom data on upload.

Added

  • Upload data callback

[1.2.1] - 2022-05-14

Provide the ability to remove the image from Server.

Changed

  • Added some note for the csrf-token

[1.2.0] - 2022-05-14

Provide the ability to remove the image from Server.

Added

  • API to remove image from server.

[1.1.5] - 2022-05-05

We have changed the preloader.

Changed

  • Image Preloader for example.

[1.1.4] - 2022-05-05

We have fixed some bugs when saving the caption.

Fixed

  • Bug on saving captions.

[1.1.3] - 2022-05-05

Change the way to catch caption HTML structure.

Changed

  • Refactor captions.

[1.1.2] - 2022-05-04

We have fixed some bugs when saving the caption.

Fixed

  • Bug on saving captions

[1.1.1] - 2022-05-04

We have tested and fixed so many times from version 1.0.0

[1.0.0] - 2022-04-25

  • Released.