Editor.js Image Tool

An advanced image tool for Editor.js with upload, resize, aspect ratio control, and link functionality.

Features

• 🖼️ Image Upload: Upload images to your server
• 📏 Dimension Control: Set custom width and height
• 🔗 Link Support: Add clickable links to images
• ⚖️ Aspect Ratio: Maintain or customize aspect ratios
• ♿ Accessibility: Full accessibility support with proper labels and IDs
• 🎨 Preview: Real-time preview with link indicators
• 🔧 Configurable: Customizable upload endpoints and headers

Installation

npm install @blumacdigital/editorjs-image-tool

Usage

Basic Usage

import EditorJS from '@editorjs/editorjs';
import ImageTool from '@blumacdigital/editorjs-image-tool';

// Import the CSS styles
import '@blumacdigital/editorjs-image-tool/dist/image-tool.css';

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    image: {
      class: ImageTool,
      config: {
        imageUploadEndPoint: 'https://your-api.com/upload',
        additionalRequestHeaders: {
          'Authorization': 'Bearer your-token',
          'X-CSRF-TOKEN': 'your-csrf-token'
        }
      }
    }
  }
});

CSS Import

The package includes CSS that needs to be imported separately:

// ES6 import
import '@blumacdigital/editorjs-image-tool/dist/image-tool.css';

Or in your CSS/SCSS file:

@import '~@blumacdigital/editorjs-image-tool/dist/image-tool.css';

Or include it in your HTML:

<link rel="stylesheet" href="node_modules/@blumacdigital/editorjs-image-tool/dist/image-tool.css">

Configuration Options

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | imageUploadEndPoint | string | '' | URL endpoint for image uploads | | additionalRequestHeaders | object | {} | Additional headers to send with upload requests |

Upload Endpoint Response

Your upload endpoint should return a JSON response in this format:

{
  "file": {
    "url": "https://your-domain.com/path/to/uploaded/image.jpg"
  }
}

Output Data

The tool outputs data in this format:

{
  "type": "image",
  "data": {
    "file": {
      "url": "https://example.com/image.jpg"
    },
    "caption": "Image caption",
    "alt": "Alt text for accessibility",
    "link": "https://example.com/link",
    "width": 800,
    "height": 600,
    "maintainAspectRatio": true
  }
}

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch for changes during development
npm run dev

License

MIT License - see LICENSE file for details.