Image resize and crop tune

Provides Image Tune for the Editor.js.

Allows cropping and resizing images within EditorJS

Installing

Package manager

Using npm:

$ npm install editorjs-image-resize-crop

Using yarn:

$ yarn add editorjs-image-resize-crop

Using pnpm:

$ pnpm add editorjs-image-resize-crop

Once the package is installed, you can import the library using import or require approach:

import { ImageToolTune } from 'editorjs-image-resize-crop';

Source code

1. Clone this repository:

git clone https://github.com/GuilhermeAGouveia/editorjs-image-resize-crop.git

2. Install all dependencies

npm install

3. Run build script:

npm run build

4. Get the source code in dist dir

How use

Basic use

import EditorJS from '@editorjs/editorjs';
import { ImageToolTune } from 'editorjs-image-resize-crop';
import Image from '@editorjs/image';

const editor = new EditorJS({
  tools: {
    image: {
      class: Image,
      tunes: ['imageResize'],
    },
    imageResize: {
      class: ImageToolTune,
      config: {
        resize: true,
        crop: false
      }
    }
  }
});

Config Params

| Field | Type | Description | | -------------- | --------- | ------------------------------- | | resize | boolean | should start with resize enable | | caption | boolean | should start with crop enable |

Example:

imageTune: {
      class: ImageToolTune as BlockToolConstructable,
      config: { resize: true, crop: false },
},

Data

This plugin return data using this interface:

interface ImageToolTuneData {
  resize: boolean;
  resizeSize: number;
  crop: boolean;
  cropperFrameHeight: number;
  cropperFrameWidth: number;
  cropperFrameLeft: number;
  cropperFrameTop: number;
  cropperImageHeight: number;
  cropperImageWidth: number;
}

Dependencies

• Editor.js (^2.30.8)
• Cropper.js (1.5)

License

• MIT