Image and Text Tool

Image and text Tool for the Editor.js.

Features

This tool allows you to create Side by side image and text blocks

Note Tool requires server-side implementation for image uploading. See backend response format for more details.

Get the package

You can get the package using any of these ways.

Usage

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

var editor = EditorJS({
  ...

  tools: {
    ...
    imageAndText: {
      class: ImageAndText,
      config: {
        endpoints: {
          byFile: 'http://localhost:8008/uploadFile', // Your backend image file uploader endpoint
          byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading image by Url
        }
      }
    }
  }

  ...
});

Config Params

Personality Tool supports these configuration parameters:

Field	Type	Description
endpoints	`{byFile: string, byUrl: string}`	Endpoints for photo 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
descriptionPlaceholder	`string`	(default: `Description`) Placeholder for description field
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.

Output data

This Tool returns data with following format

Field	Type	Description
description	`string`	Person's description
photo	`string`	Uploaded image url from backend.

{
    "type" : "imageandtext",
    "data" : {
        "description" : "Elon Reeve Musk FRS is a technology entrepreneur, investor, and engineer. He holds South African, Canadian, and U.S. citizenship and is the founder",
        "photo" : "https://capella.pics/3c0e1b97-bc56-4961-b54e-2a6c2c3260f2.jpg"
    }
}

Scenario:

User select file from the device
Tool sends it to your backend (on config.endpoint.byFile route)
Your backend should save file and return file data with JSON at specified format.
Personality tool shows saved image and stores server answer

So, you can implement backend for file saving by your own way. It is a specific and trivial task depending on your environment and stack.

Response of your uploader should cover following format:

{
    "success" : 1,
    "file": {
        "url" : "https://capella.pics/3c0e1b97-bc56-4961-b54e-2a6c2c3260f2.jpg",
    }
}

success - uploading status. 1 for successful, 0 for failed

file - uploaded file data. Must contain an url field with full public path to the uploaded image.

Uploading by pasted URL

Scenario:

User pastes an URL of the image file to the Editor
Editor pass pasted string to the Image Tool
Tool sends it to your backend (on config.endpoints.byUrl route) via 'url' POST-parameter
Your backend should accept URL, download and save the original file by passed URL and return file data with JSON at specified format.
Personality tool shows saved image and stores server answer

Response of your uploader should be at the same format as described at «Uploading files from device» section

Uploading by drag-n-drop or from Clipboard

Your backend will accept file as FormData object in field name, specified by config.field (by default, «image»). You should save it and return the same response format as described above.

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

Example:

import ImageAndText from 'editorjs-imageandtext';

var editor = EditorJS({
  ...

  tools: {
    ...
    imageAndText: {
      class: ImageAndText,
      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
                }
              }
            })
          }
        }
      }
    }
  }

  ...
});

Acesmndr/editorjs-imageandtext