EditorJS Inline Image Tool

Image tool for Editor.js.

Embed images from image files, URLs or Unsplash.

Notes

Requires no server-side uploader.

Built following the Unsplash API Guidelines.

Extends the functionality of simple-image.

Installation

Install via NPM

Get the package

$ npm i --save-dev editorjs-inline-image

Include module at your application

import InlineImage from 'editorjs-inline-image';

Usage

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

const editor = EditorJS({
  tools: {
      image: {
        class: InlineImage,
        inlineToolbar: true,
        config: {
          unsplash: {
            appName: 'your_app_name',
            clientId: 'your_client_id'
          }
        }
      }
  }
});

Config Params

Tool's tunes

1. Add border

2. Stretch to full-width

3. Add background

Output data

Image

{
    "type" : "image",
    "data" : {
        "url" : "https://www.example.com/image.jpg",
        "caption" : "An image",
        "withBorder" : false,
        "withBackground" : false,
        "stretched" : true
    }
}

Unsplash image

        {
            "type": "image",
            "data": {
                "url": "https://images.unsplash.com/photo-xxxxxxxxxxxxxxxxx",
                "caption": "An image from Unsplash",
                "withBorder": false,
                "withBackground": true,
                "stretched": false,
                "unsplash": {
                    "author": "John Doe",
                    "profileLink": "https://unsplash.com/@john_doe_fake"
                }
            }
        }

Development

Development mode

$ yarn build:dev

Production release

1. Create a production bundle

$ yarn build

2. Commit dist/bundle.js

Run tests

$ yarn test

Contributing and Development

Bug reports and pull requests are welcome on GitHub https://github.com/kommitters/editorjs-inline-image. Everyone is welcome to participate in the project.

Changelog

See the CHANGELOG for versions details.

License

See LICENSE for details.

Credits

Made with 💙 by kommit