@blade47/editorjs-image
Advanced tools
Enhanced Image Block for Editor.js with interactive resizing, modern UI, and improved performance.
Interactive resizing, modern UI, and smooth animations in action
This is an enhanced fork of the official @editorjs/image tool with significant changes and a simplified, focused feature set.
This fork removes the tunes/settings UI (border, background, stretch options) to provide a cleaner, more focused editing experience centered around the core functionality: uploading, displaying, and resizing images/videos.
max-width: 100% prevents overflowNotes
This Tool requires server-side implementation for file uploading. See backend response format for more details.
Video files are displayed using the <video> element with controls, autoplay, loop, and muted attributes for a GIF-like experience.
Get the package
npm install @blade47/editorjs-image
# or
yarn add @blade47/editorjs-image
Include module at your application
import ImageTool from '@blade47/editorjs-image';
Add a new Tool to the tools property of the Editor.js initial config.
import ImageTool from '@blade47/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} | Required if no custom uploader. 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. Use image/*,video/mp4 for video support. |
| 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: Enter a 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. |
| actions | array | Array with custom actions to show in the tool's settings menu. See details below. |
| showCaption | boolean | (default: true) Show or hide the caption field |
Note that if you don't implement your custom uploader methods, the endpoints param is required.
You can add custom action buttons to the tool's settings menu:
image: {
class: ImageTool,
config: {
endpoints: {
byFile: 'http://localhost:8008/uploadFile',
},
actions: [
{
name: 'download',
icon: '<svg>...</svg>',
title: 'Download Image',
toggle: false,
action: () => {
// Your custom action logic
console.log('Download clicked');
}
}
]
}
}
This Tool returns data with following format
| Field | Type | Description |
|---|---|---|
| file | object | Uploaded file data. Any data got from backend uploader. Always contains the url property |
| caption | string | Image's caption |
| width | string | Image width in pixels (preserved from user resizing) |
| height | string | Image height in pixels (preserved from user resizing) |
{
"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",
"width": "800",
"height": "450"
}
}
Notes:
withBorder, withBackground, or stretched fields as the tunes/settings UI has been removed for a cleaner, more focused experience.max-width: 100%, images automatically scale down on smaller screens while maintaining the user's intended size on larger displays.This Tool works by one of the following schemes:
Scenario:
config.endpoints.byFile route)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:
{
"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 a url field with full public path to the uploaded image.
Also, can contain any additional fields you want to store. For example, width, height, id etc.
All additional fields will be saved at the file object of output data.
Scenario:
config.endpoints.byUrl route) via 'url' in request bodyThe tool executes the request as application/json with the following request body:
{
"url": "<pasted URL from the user>",
"additionalRequestData": "<additional request data from configuration>"
}
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 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 uploaded image data |
| uploadByUrl | string | {Promise.<{success, file: {url}}>} | Send URL-string to the server, that should load image by this URL and return uploaded image data |
Example:
import ImageTool from '@blade47/editorjs-image';
var editor = EditorJS({
...
tools: {
...
image: {
class: ImageTool,
config: {
/**
* Custom uploader
*/
uploader: {
/**
* Upload file to the server and return 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 uploaded image data
* @param {string} url - pasted image URL
* @return {Promise.<{success, file: {url}}>}
*/
uploadByUrl(url) {
// your ajax request for uploading
return MyAjax.upload(url).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
}
}
})
}
}
}
}
}
...
});
Images and videos can be resized by dragging the handles that appear on hover:
The resized dimensions are automatically saved and restored when the content is loaded again.
To enable video uploads, configure the types parameter:
image: {
class: ImageTool,
config: {
types: 'image/*,video/mp4',
endpoints: {
byFile: 'http://localhost:8008/uploadFile',
}
}
}
Videos are displayed with:
This fork includes a completely redesigned interface with:
The tool uses CSS custom properties for easy theming:
.image-tool {
--bg-color: #f7f9fc;
--front-color: #0066ff;
--border-color: #e1e8f0;
--text-primary: #1a1a1a;
--text-secondary: #6b7280;
}
A development server is included for testing uploads:
node dev/server.js
This exposes port 8008 with two endpoints:
http://localhost:8008/uploadFile - File upload endpointhttp://localhost:8008/fetchUrl - URL fetch endpointFiles are saved to dev/.tmp/ directory.
Configure your tool to use these endpoints during development:
config: {
endpoints: {
byFile: 'http://localhost:8008/uploadFile',
byUrl: 'http://localhost:8008/fetchUrl',
}
}
npm run build
Outputs:
dist/image.umd.js - UMD bundle for <script> tags and CommonJSdist/image.mjs - ES module for modern importsdist/index.d.ts - TypeScript type declarationsnpm run lint # Check for errors
npm run lint:errors # Show errors only (quiet)
npm run lint:fix # Auto-fix issues
@blade47/editorjs-imageThis is a fork maintained separately from the original Editor.js Image tool.
Original Tool: editor-js/image This Fork: blade47/editorjs-image
onPaste to sync for better Editor.js compatibilitymax-width: 100% for responsive behaviorMIT
FAQs
Image Tool for Editor.js
We found that @blade47/editorjs-image demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.