Image Tool

Image Block for the Editor.js.

Features

Uploading file from the device
Pasting copied content from the web
Pasting images by drag-n-drop
Pasting files and screenshots from Clipboard
Allows to add border, background
Allows to stretch image to the container's full-width

Note This Tool requires server-side implementation for file uploading. See backend response format for more details.

Installation

Install via NPM

Get the package

npm i --save-dev @editorjs/image

Include module at your application

const ImageTool = require('@editorjs/image');

Download to your project's source dir

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

Load from CDN

You can load specific version of package from jsDelivr CDN.

https://cdn.jsdelivr.net/npm/@editorjs/image@1.0.0

Then require this script on page with Editor.js through the <script src=""></script> tag.

Usage

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

var editor = EditorJS({
  ...

  tools: {
    ...
    image: {
      class: ImageTool,
      config: {
        endpoints: {
          byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
          byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
        }
      }
    }
  }

  ...
});

Config Params

Image Tool supports these configuration parameters:

Field	Type	Description
endpoints	`{byFile: string, byUrl: string}`	Required Endpoints for file uploading. Contains 2 fields: byFile - for file uploading byUrl - for uploading by URL
field	`string`	(default: `image`) Name of uploaded image field in POST request
types	`string`	(default: `image/*`) Mime-types of files that can be accepted with file selection.
additionalRequestData	`object`	Object with any data you want to send with uploading requests
additionalRequestHeaders	`object`	Object with any custom headers which will be added to request. See example
captionPlaceholder	`string`	(default: `Caption`) Placeholder for Caption input
buttonContent	`string`	Allows to override HTML content of «Select file» button

Tool's settings

Add border
Stretch to full-width
Add background

Output data

This Tool returns data with following format

Field	Type	Description
file	`object`	Uploaded file data. Any data got from backend uploader. Always contain the `url` property
caption	`string`	image's caption
withBorder	`boolean`	add border to image
withBackground	`boolean`	need to add background
stretched	`boolean`	stretch image to screen's width

{
    "type" : "image",
    "data" : {
        "file": {
            "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg"
        },
        "caption" : "Roadster // tesla.com",
        "withBorder" : false,
        "withBackground" : false,
        "stretched" : true
    }
}

Backend response format

This Tool works by one of the following schemes:

Uploading files from the device
Uploading by URL (handle image-like URL's pasting)
Uploading by drag-n-drop file
Uploading by pasting from Clipboard

Uploading files from device

Scenario:

User select file from the device
Tool sends it to your backend (on config.endpoint.byFile route)
Your backend should save file and return file data with JSON at specified format.
Image tool shows saved image and stores server answer

So, you can implement backend for file saving by your own way. It is a specific and trivial task depending on your environment and stack.

Response of your uploader should cover following format:

{
    "success" : 1,
    "file": {
        "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
        // ... and any additional fields you want
    }
}

success - uploading status. 1 for successful, 0 for failed

file - uploaded file data. Must contain an url field with full public path to the uploaded image. Also, can contain any additional fields you want to store. For example, width, height, id etc. All additional fields will be saved at the file object of output data.

Uploading by pasted URL