@coolbytes/editorjs-image

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"
}