Image Tune Plus — Advanced Image Styling Tune for Editor.js

Tool for the Editor.js.

This plugin is compatible only with the official @editorjs/image.

Image Tune Plus is an Editor.js Tune plugin that adds advanced image styling: width, aspect ratio, alignment, rounded corners, and other decorative parameters. It was created to fix the lack of proper image styling controls in mobile layouts, where images often do not scale or align correctly out of the box.

Demo

Features

Parameter	Values
Width	100%, 80%, 60%, 50%
Aspect ratio	Auto (null), 16:9, 4:3, 1:1 (when a ratio is selected, width is 100%)
Alignment	left, center, right
Rounded corners	0px, 8px, 16px, 24px

Installation

You can get the package using any of these ways.

Via NPM / Yarn

npm install editorjs-image-tune-plus

Load from CDN

You can load a specific version of the package from jsDelivr CDN.

https://cdn.jsdelivr.net/npm/editorjs-image-tune-plus/dist/image-tune-plus.umd.js

Then require this script on the page with Editor.js through the <script src=""></script> tag

---

Usage

Add a new Tool to the tools property of the Editor.js initial config.

import EditorJS from "@editorjs/editorjs";
import ImageTool from "@editorjs/image";
import ImageTunePlus from "editorjs-image-tune-plus";

const editor = new EditorJS({
  holder: "editor",

  tools: {
    image: {
      class: ImageTool,
      inlineToolbar: true,
      tunes: ["imageTunePlus"],
      config: {
        caption: false,
      },
    },

    imageTunePlus: {
      class: ImageTunePlus,
    },
  },
});

---

Output Data Format

The plugin adds data to tunes.imageTunePlus:

{
  "tunes": {
    "imageTunePlus": {
      "width": 80,
      "ratio": "16:9",
      "align": "left",
      "rounded": 8,
      "shadow": "none"
    }
  }
}

---

📜 License

MIT License
Author: pasichDev

---

Support

Want new features? Just let me know — we'll expand the plugin 😉