Editorjs Image Tool with Delete Module

Editorjs Image Block with Delete Module for the Editor.js.

This is the forked repository of Image Block for the Editor.js with delete module to allow deleting image when the block is removed. We highly recommend you to check out the docs from Image Block for the Editor.js first.

Features

• Uploading file from the device
• Pasting copied content from the web
• Pasting images by drag-n-drop
• Pasting files and screenshots from Clipboard
• Allows adding a border, and a background
• Allows stretching an image to the container's full-width

Notes

This Tool requires server-side implementation for the file uploading. See backend response format for more details.

This Tool is also capable of uploading & displaying video files using the

Installation

Install via NPM

Get the package

npm i --save-dev @pawritharya/editorjs-image-tool-delete

Include module at your application

import ImageTool from '@pawritharya/editorjs-image-tool-delete';

Usage

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

import ImageTool from '@editorjs/image';


var editor = EditorJS({
  ...

  tools: {
    ...
    image: {
      class: ImageTool,
      config: {
      uploader: {
        uploadByFile: async file => {
          const { data } = await uploadFile({ variables: { file } });

          return {
            success: 1,
            file: {
              url: data.fileUpload.uploadedFile.url
            }
          };
        }
      },
      deleter: {
        deleteFile: async url => {
          const { data } = await deleteFile({ variables: { url } });

          return { success: 1 };
        }
      }
    }
    }
  }

  ...
});

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
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, uploadWithDelegation: function}}	Optional custom uploading methods. See details below.
deleter	{{deleteFile: function}}	Optional custom deleting methods. See details below.
actions	array	Array with custom actions to show in the tool's settings menu. See details below.
chooseFileOnInitiate	boolean	(default: false) Boolean value to indicate if the modal for choosing file should open or not.
showPreloaderForUrlUpload	boolean	(default: false) Boolean value to indicate if preloader should be shown when url is pasted.
uploadWithDelegationLabel	string	(default: Provide an URL) Tune label for uploader.uploadWithDelegation method.

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

Providing custom deleting method

As mentioned at the Config Params section, you have an ability to provide own custom deleting method. It is a quite simple: implement deleteFile method and pass them via deleter config param. The method must return a Promise that resolves with response in a format that described at the backend response format section.

Method	Arguments	Return value	Description
deleteFile	String	{Promise.<{success}>}	Delete file with provided url when the image block is removed

Example:

import ImageTool from '@pawritharya/editorjs-image-tool-delete';

var editor = EditorJS({
  ...

  tools: {
    ...
    image: {
      class: ImageTool,
      config: {
      deleter: {
        deleteFile: async url => {
          const { data } = await deleteFile({ variables: { url } });

          return { success: 1 };
        }
      }
    }
    }
  }

  ...
});

Providing custom uploading methods

As mentioned at the Config Params section, you have an ability to provide own custom uploading methods. It is a quite simple: implement uploadByFile and uploadByUrl methods and pass them via uploader config param. Both methods must return a Promise that resolves with response in a format that described at the backend response format section.

Method	Arguments	Return value	Description
uploadByFile	File	{Promise.<{success, file: {url}}>}	Upload file to the server and return an uploaded image data
uploadByUrl	string	{Promise.<{success, file: {url}}>}	Send URL-string to the server, that should load image by this URL and return an uploaded image data
uploadWithDelegation	Function	void	Provide a callback function as argument to let client implement it's own url choosing mechanism.

Example:

import ImageTool from '@editorjs/image';

var editor = EditorJS({
  ...

  tools: {
    ...
    image: {
      class: ImageTool,
      config: {
        /**
         * Custom uploader
         */
        uploader: {
          /**
           * Upload file to the server and return an uploaded image data
           * @param {File} file - file selected from the device or pasted by drag-n-drop
           * @return {Promise.<{success, file: {url}}>}
           */
          uploadByFile(file){
            // your own uploading logic here
            return MyAjax.upload(file).then(() => {
              return {
                success: 1,
                file: {
                  url: 'https://codex.so/upload/redactor_images/o_80beea670e49f04931ce9e3b2122ac70.jpg',
                  // any other image data you want to store, such as width, height, color, extension, etc
                }
              };
            });
          },

          /**
           * Send URL-string to the server. Backend should load image by this URL and return an uploaded image data
           * @param {string} url - pasted image URL
           * @return {Promise.<{success, file: {url}}>}
           */
          uploadByUrl(url){
            // your ajax request for uploading
            return MyAjax.upload(file).then(() => {
              return {
                success: 1,
                file: {
                  url: 'https://codex.so/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg',,
                  // any other image data you want to store, such as width, height, color, extension, etc
                }
              }
            })
          }

           /**
           * Send URL-string to the server. Backend should load image by this URL and return an uploaded image data
           * @param {string} url - pasted image URL
           * @return {Promise.<{success, file: {url}}>}
           */
          uploadWithDelegation(callbackToTriggerUpload: (url: string) => void){
            // Add your client's image url selection implementation here
          }
        }
      }
    }
  }

  ...
});