Unsplash inline images tool for editorjs
npm install @samandar.boymurodov/editorjs-inline-image
Image tool for Editor.js.
Embed images from Unsplash, blob or URLs.
Do not require a server-side uploader.
Built following the Unsplash API Guidelines.
Extends the functionality of simple-image.
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
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',
clientId: 'your_client_id'
}
}
}
}
});
`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,
clientId: string,
maxResults: string,
updateUrlOnSelect: (imgUrl: string) => string
unsplashInnerHtm: stringl
} | Config for Unsplash API. Contains 4 fields:
appName: Unspalsh .
clientId: Unsplash Access Key.
maxResults: Max number of images per search (default 30).
updateUrlOnSelect: Callback that is called with image URL when image is selected. It allows to modify Unsplash image parameters(see https://unsplash.com/documentation#supported-parameters).
unsplashInnerHtml: HTML content for "Unsplash" tab. Passing this config disables embed tab. |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
Run 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