Editorjs-image NPM

Image Tool Tune

Tunes for the Image Tool Block Editor.js.

Features

Float Image Left/Right
Resize : 50%, 70%, 100%
Manual resizing
Image cropping

Notes

The Float functionnality is done in pure CSS. Works seamlessly when creating block, nevertheless, when using it along side Resize or Crop, it might be usefull sometimes to deactivate it while resizing/cropping as it will prevent the next content block from overlapping the current image block, when finished you can reactivate it.

Installation

Install via NPM

The package is not available on NPM yet.

Other methods

Manual downloading and connecting

Download the file dist/image-tool-tune.js to you project
Include the script where you normally import other Editor Js Tools.
Add new options to the EditorJS Class

Import in Simple HTML

Include the script where you normally import other Editor Js Tools.

    <!--Editor JS-->
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.27.2/dist/editorjs.umd.min.js"></script>
    <!--Editor Tool JS-->
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.3.0"></script>
    <!--Editor Tool Tune-->
    <script src="./dist/image-tool-tune.js"></script>
    [...BODY...]
    <script>
        //On DOM LOADED
        document.addEventListener( 'DOMContentLoaded', function () {
            //Get tune class
            const ImageToolTune = window.ImageToolTune;
            //Get tool class
            const ImageTool = window.ImageTool;

            //Init editor JS
        } );
    </script>

Import in Node (React, Next...)

//IMPORT EDITOR JS
import EditorJS from '@editorjs/editorjs';

//IMPORT IMAGE TOOL
import ImageTool from '@editorjs/image';

//IMPORT IMAGE TOOL TUNE (CHANGE PATH ACCORDING TO YOU CONFIG)
import ImageToolTune from '../lib/image-tool-tune';

Load tool in editor js

const editor = new EditorJS( {
    holder: 'editorjs', //Your Editor JS Holder ID
    tools: {
        //LOAD THE TUNE
        imageTune: ImageToolTune,
        image: {
            //APPLY THE TUNE TO THE TOOL
            tunes: [ 'imageTune' ],
            class: ImageTool,
        },
    },
    data: {}, //EditorJS Json for loading pre-saved blocks
});

Output data

This Tunes returns tunes.imageTune with following format

Field	Type	Description
floatLeft	`boolean`	Image is floating to left
floatRight	`boolean`	Image is floating to right
center	`boolean`	Image has a margin:auto
sizeSmall	`boolean`	Image width is 50% of its container
sizeMiddle	`boolean`	Image width is 70% of its container
sizeLarge	`boolean`	Image width is 100% of its container
resize	`boolean`	Manual resize mode activated ?
resizeSize	`integer`	Width (in px) of the resized image
crop	`boolean`	Manual cropping mode activated ?
cropperFrameHeight	`integer`	Height (in px) of the image relative container
cropperFrameWidth	`integer`	Width (in px) of the image relative container
cropperFrameLeft	`integer`	Left position (in px) of the image
cropperFrameTop	`integer`	Top position (in px) of the image
cropperImageHeight	`integer`	Height (in px) of the image
cropperImageWidth	`integer`	Width (in px) of the image

{
   "tunes": { 
    "imageTune": { 
        "floatLeft": true, 
        "floatRight": false, 
        "center": false, 
        "sizeSmall": false, 
        "sizeMiddle": false, 
        "sizeLarge": false, 
        "resize": false, 
        "resizeSize": 0, 
        "crop": true,
        "cropperFrameHeight": 158.16171875000003, 
        "cropperFrameWidth": 180.2658808997665, 
        "cropperFrameLeft": -222.4233718312208, 
        "cropperFrameTop": -149.29999999999995, 
        "cropperImageHeight": 638, 
        "cropperImageWidth": 639.7024683122081 
        }
    }
}