@coolbytes/editorjs-image v1.0.2

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

Custom Configuration

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

Output data

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