editorjs-image-crop-resize

September 24, 2025 · View on GitHub

A plugin for cropping , resizing and editing the images inside the editorjs's image block.

🏅 Features

✂️ Crop & Resize — adjust images with precise cropping and custom width presets.

🔄 Rotate & Flip — rotate images ±45° and flip horizontally or vertically.

🎨 Non-destructive editing — original image is preserved until you apply changes.

⚡ Seamless Editor.js integration — works as a tune for the Image tool.

🖼️ Base64 save option — cropped images are stored directly in Editor.js output data.

📦 Installation

Install my-project with npm

  npm install editorjs-image-crop-resize

⚙️ Usage/Examples

//import editorjs and its imageTool first

import CropperTune from "editorjs-image-crop-resize";
import "editorjs-image-crop-resize/dist/cropper-tune.css";

const editor = new EditorJS({
  holder: "editorjs",
  tools: {
    image: {
      class: ImageTool,
      config : {
          //backend image uploader logic
      }
      tunes: ["CropperTune"],
    },
    CropperTune: {
      class: CropperTune
    }
  }
});

You also can load the package via cdn

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editorjs-image-crop-resize@1.0.0/dist/cropper-tune.css">


<!-- UMD build -->
<script src="https://cdn.jsdelivr.net/npm/editorjs-image-crop-resize@1.0.0/dist/cropper-tune.umd.js"></script>