Image Tool for Editor.js
npm install @editorjs/image
Image Block for the Editor.js.
- 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, a background and a caption
- 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.
Get the package
``shell`
yarn add @editorjs/image
Include module at your application
`javascript`
import ImageTool from '@editorjs/image';
Optionally, you can load this tool from JsDelivr CDN
Add a new Tool to the tools property of the Editor.js initial config.
`javascript
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
}
}
}
}
...
});
`
Image Tool supports these configuration parameters:
| Field | Type | Description |
| ----- | -------- | ------------------ |
| endpoints | {byFile: string, byUrl: string} | Endpoints for file uploading. string
Contains 2 fields:
__byFile__ - for file uploading
__byUrl__ - for uploading by URL |
| field | | (default: image) Name of uploaded image field in POST request |string
| types | | (default: image/*) Mime-types of files that can be accepted with file selection.|object
| additionalRequestData | | Object with any data you want to send with uploading requests |object
| additionalRequestHeaders | | Object with any custom headers which will be added to request. See example |string
| captionPlaceholder | | (default: Caption) Placeholder for Caption input |string
| buttonContent | | Allows to override HTML content of «Select file» button |{{uploadByFile: function, uploadByUrl: function}}
| uploader | | Optional custom uploading methods. See details below. |array
| actions | | Array with custom actions to show in the tool's settings menu. See details below. |object
| features | | Allows you to enable/disable additional features such as border, background tunes and caption. See details below. |
Note that if you don't implement your custom uploader methods, the endpoints param is required.
1. Add border
2. Stretch to full-width
3. Add background
4. Add caption
Add extra setting-buttons by adding them to the actions-array in the configuration:`js${name} button clicked
actions: [
{
name: 'new_button',
icon: '',
title: 'New Button',
toggle: true,
action: (name) => {
alert();`
}
}
]
_NOTE:_ return value of action callback for settings whether action button should be toggled or not is deprecated. Consider using toggle option instead.
You can disable features such as border, background tunes and caption by defining features in the configuration:`js`
features: {
border: false,
caption: 'optional',
stretch: false
}
_NOTE:_ set caption to optional in order to configure caption as a tune.
This Tool returns data with following format
| Field | Type | Description |
| -------------- | --------- | ------------------------------- |
| file | object | Uploaded file data. Any data got from backend uploader. Always contain the url property |string
| caption | | image's caption |boolean
| withBorder | | add border to image |boolean
| withBackground | | need to add background |boolean
| stretched | | stretch image to screen's width |
`json`
{
"type" : "image",
"data" : {
"file": {
"url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg"
},
"caption" : "Roadster // tesla.com",
"withBorder" : false,
"withBackground" : false,
"stretched" : true,
}
}
This Tool works by one of the following schemes:
1. Uploading files from the device
2. Uploading by URL (handle image-like URL's pasting)
3. Uploading by drag-n-drop file
4. Uploading by pasting from Clipboard
Scenario:
1. User select file from the device
2. Tool sends it to your backend (on config.endpoints.byFile route)
3. Your backend should save file and return file data with JSON at specified format.
4. Image 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.
The tool executes the request as multipart/form-data, with the key as the value of field in configuration.
The response of your uploader should cover the following format:
`json5`
{
"success" : 1,
"file": {
"url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
// ... and any additional fields you want to store, such as width, height, color, extension, etc
}
}
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.file
Also, can contain any additional fields you want to store. For example, width, height, id etc.
All additional fields will be saved at the object of output data.
Scenario:
1. User pastes an URL of the image file to the Editor
2. Editor pass pasted string to the Image Tool
3. Tool sends it to your backend (on config.endpoints.byUrl route) via 'url' in request body
4. Your backend should accept URL, download and save the original file by passed URL and return file data with JSON at specified format.
5. Image tool shows saved image and stores server answer
The tool executes the request as application/json with the following request body:
`json5`
{
"url": "
"additionalRequestData": "
}
Response of your uploader should be at the same format as described at «Uploading files from device» section
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.
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 |string
| uploadByUrl | | {Promise.<{success, file: {url}}>} | Send URL-string to the server, that should load image by this URL and return an uploaded image data |
Example:
`js
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
}
}
})
}
}
}
}
}
...
});
``