Unsplash inline images tool for editorjs
npm install editorjs-inline-image!stability-stable




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

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.
You can install the tool via npm or load it from a CDN.
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.jsRun tests
`shell
$ yarn test
``[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