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

Field	Type	Description
unsplash	{appName: string, clientId: string, maxResults: string}	Config for Unsplash API. Contains 3 fields: appName: Unspalsh Application Name. clientId: Unsplash Access Key. maxResults: Max number of images per search (default 30).

Tool's tunes

1. Add border

2. Stretch to full-width

3. Add background

Output data

Field	Type	Description
url	string	Image's url
caption	string	Image's caption
withBorder	boolean	Add border to image
withBackground	boolean	Add background
stretched	boolean	Stretch image to screen's width
unsplash	{author: string, profileLink: string}	Unsplash image author information. author: Author's name. profileLink: Unsplash porfile link.

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