Image block tool for Editor.js

This Editor.js block tool allows you to add images. This implementation is directly taken from the Editor.js Docs.

Preview

Block Tool

Block Settings

Installation

Using npm

npm install @coolbytes/editorjs-image

Using yarn

yarn add @coolbytes/editorjs-image

Usage

Include it in the tools property of Editor.js config:

const editor = new EditorJS({
  tools: {
    image: Image
  }
});

Config Params

|Field|Type|Optional|Default|Description| |---|---|---|---|---| |imageAlt|string|Yes|picture|Alternate text for images| |enableCaption|boolean|Yes|false|Flag to enable image caption| |captionPlaceholder|string|Yes|Enter a caption|Placeholder text for image caption|

Custom Configuration

const editor = EditorJS({
  tools: {
    image: {
      class: Image,
      inlineToolbar: true,
      config: {
        enableCaption: true,
        captionPlaceholder: 'Enter a caption'
      }
    }
  }
});

Output data

|Field|Type|Description| |---|---|---| |url|string|Image src URL| |caption|string|Image caption| |withBorder|boolean|Indicates if image border is added| |withBackground|boolean|Indicates if image background is added| |stretched|boolean|Indicates if image is stretched|

Example:

{
  "time": 1715969561758,
  "blocks": [
    {
      "id": "_K5QcJHHuK",
      "type": "image",
      "data": {
        "url": "https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_1280.jpg",
        "caption": "Source: Editor.js",
        "withBorder": true,
        "stretched": true,
        "withBackground": false
      }
    }
  ],
  "version": "2.29.1"
}