Image Tool

Image Block for the Editor.js.

Clone of (https://github.com/editor-js/image) version 2.3.2. The default package is extended with an option for custom Tunes. Check the README.md for default implementation.

Usage

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

import ImageTool from '@editorjs/image';

// or if you inject ImageTool via standalone script
const ImageTool = window.ImageTool;
 
var editor = EditorJS({
  ...

  tools: {
    ...
    image: {
      class: ImageTool,
      config: {
        endpoints: {
          byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
          byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
        },
        tunes: [
          {
            name: 'alignLeft',
            icon: '<svg width="15" height="15" aria-hidden="true" focusable="false" data-prefix="fas"><path></path></svg>',
            title: 'Align left'
          },
          {
            name: 'alignCenter',
            icon: '<svg width="15" height="15" aria-hidden="true" focusable="false" data-prefix="fas"><path></path></svg>',
            title: 'Align center'
          },
          {
            name: 'alignRight',
            icon: '<svg width="15" height="15" aria-hidden="true" focusable="false" data-prefix="fas"><path></path></svg>',
            title: 'Align right'
          },
        ]
      }
    }
  }

  ...
});

Config Params

Image Tool supports these configuration parameters:

| Field | Type | Description | | ----- | -------- | ------------------ | | endpoints | {byFile: string, byUrl: string} | Endpoints for file uploading. Contains 2 fields: byFile - for file uploading byUrl - for uploading by URL | | §tunes | [{name: string, icon: svg, title: string}] | Array of objects containing custom tunes to extend the default list of tunes | | field | string | (default: image) Name of uploaded image field in POST request | | types | string | (default: image/*) Mime-types of files that can be accepted with file selection.| | additionalRequestData | object | Object with any data you want to send with uploading requests | | additionalRequestHeaders | object | Object with any custom headers which will be added to request. See example | | captionPlaceholder | string | (default: Caption) Placeholder for Caption input | | buttonContent | string | Allows to override HTML content of «Select file» button | | uploader | {{uploadByFile: function, uploadByUrl: function}} | Optional custom uploading methods. See details below. |

Note that if you don't implement your custom uploader methods, the endpoints param is required.