@pawritharya/editorjs-clutch-widget-embed v1.0.2

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 element. To enable this, specify video mime-types via the 'types' config param.

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:

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.

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.

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

  ...
});