Simple Image Tool WIHTOUT BASE64

Why?

Because it may be unsafe or take up too much space on servers/databases. Use the image URL instead.

Provides Image Blocks for the Editor.js.

Works only with pasted image URLs and requires no server-side uploader.

Installation

Get the package

git clone https://github.com/Michota/simple-image/

Include module at your application

import SimpleImage = ../simple-image/src/index.js";

Load from CDN

You can load specific version of package from jsDelivr CDN.

https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest

Then require this script on page with Editor.js.

<script src="..."></script>

Usage

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

var editor = EditorJS({
  ...
  
  tools: {
    ...
    image: SimpleImage,
  }
  
  ...
});

Config Params

This Tool has no config params

Tool's settings

1. Add border

2. Stretch to full-width

3. Add background

Output data

Field	Type	Description
url	string	image's url
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" : {
        "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
    }
}