EditorJS Unsplash Inline Image Tool

!stability-stable

Image tool for Editor.js that enables you to embed images from Unsplash, blobs, or URLs directly into your content.

Notes

Requires a proxy for the Unsplash API to avoid exposing the Unsplash Access Key on the client-side. See Proxy for Unsplash API for more information.

Built following the Unsplash API Guidelines.

Extends the functionality of simple-image.

Installation

You can install the tool via npm or load it from a CDN.

$3

Get the package
``shell
$ npm i --save-dev editorjs-inline-image
`

Include module at your application

`javascript
import InlineImage from 'editorjs-inline-image';
`

$3

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

Require this script on a page with Editor.js.

`html

`

Usage

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

`javascript
const editor = EditorJS({
tools: {
image: {
class: InlineImage,
inlineToolbar: true,
config: {
embed: {
display: true,
},
unsplash: {
appName: 'your_app_name',
apiUrl: 'https://your-proxy-api-url.com',
maxResults: 30,
imageParams: {
q:85,
w:1500,
}
}
}
}
}
});
`

Config Params

| Field | Type | Description |
| -------------- | --------- | ------------------------------- |
| embed | {display: boolean} | You could display or not the embed tab, If you don't fill the embed config by default the value is set on true. |
| unsplash | {appName: string, apiUrl: string, maxResults: Number, imageParams: Object} | Config for Unsplash API. Contains 3 fields:

appName: Unsplash Application Name.

apiUrl: URL of the Proxy for Unsplash API.

maxResults: Max number of images per search (default 30).

imageParams: Additional configuration parameters for image quality and dimensions. See Dynamically resizable images for more information. |

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

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

Unsplash image

`json
{
"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
`shell
$ yarn build:dev
`

Production release
1. Create a production bundle
`shell
$ yarn build
`

2. Commit dist/bundle.js

Run tests
`shell
$ yarn test
``

Code of conduct

We welcome everyone to contribute. Make sure you have read the [CODE_OF_CONDUCT][coc] before.

Contributing

For information on how to contribute, please refer to our [CONTRIBUTING][contributing] guide.

Changelog

Features and bug fixes are listed in the [CHANGELOG][changelog] file.

License

This library is licensed under an MIT license. See [LICENSE][license] for details.

Acknowledgements

Made with 💙 by kommitters Open Source

[license]: https://github.com/kommitters/editorjs-inline-image/blob/master/LICENSE
[coc]: https://github.com/kommitters/editorjs-inline-image/blob/master/CODE_OF_CONDUCT.md
[changelog]: https://github.com/kommitters/editorjs-inline-image/blob/master/CHANGELOG.md
[contributing]: https://github.com/kommitters/editorjs-inline-image/blob/master/CONTRIBUTING.md