Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Note: This is a fork of the SimpleImage repository. It adds in extra functionality such as a toolbar to add images (rather than just drag and drop) and uses blob URL's to improve memory usage.

Simple Image Tool

Provides Image Blocks for the Editor.js.

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


Install via NPM

Get the package

npm i --save-dev simple-image-editorjs

Include module at your application

const SimpleImage = require('simple-image-editorjs');

Download to your project's source dir

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

Load from CDN

You can load specific version of package from jsDelivr CDN.

Then require this script on page with Editor.js.

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


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" : "",
        "caption" : "Roadster //",
        "withBorder" : false,
        "withBackground" : false,
        "stretched" : true
You can’t perform that action at this time.