Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kommitters/editorjs-inline-image
Unsplash inline images plugin for editorjs
https://github.com/kommitters/editorjs-inline-image
editorjs editorjs-plugin hacktoberfest javascript unsplash
Last synced: 7 days ago
JSON representation
Unsplash inline images plugin for editorjs
- Host: GitHub
- URL: https://github.com/kommitters/editorjs-inline-image
- Owner: kommitters
- License: mit
- Created: 2020-05-22T15:46:03.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-07T12:41:40.000Z (14 days ago)
- Last Synced: 2025-02-07T19:13:19.226Z (14 days ago)
- Topics: editorjs, editorjs-plugin, hacktoberfest, javascript, unsplash
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/editorjs-inline-image
- Size: 16.2 MB
- Stars: 103
- Watchers: 13
- Forks: 30
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-editorjs - editorjs-inline-image
README
# EditorJS Unsplash Inline Image Tool
[](https://coveralls.io/github/kommitters/editorjs-inline-image)
[](https://bestpractices.coreinfrastructure.org/projects/6469)
[](https://api.securityscorecards.dev/projects/github.com/kommitters/editorjs-inline-image)
Image tool for [Editor.js](https://editorjs.io) that enables you to embed images from [Unsplash](https://unsplash.com/), 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](proxy_api.md) for more information.
Built following the [Unsplash API Guidelines](https://help.unsplash.com/en/articles/2511245-unsplash-api-guidelines).
Extends the functionality of [simple-image](https://github.com/editor-js/simple-image).
## Installation
You can install the tool via npm or load it from a CDN.
### Install via NPM
Get the package
```shell
$ npm i --save-dev editorjs-inline-image
```
Include module at your application
```javascript
import InlineImage from 'editorjs-inline-image';
```
### Load from CDN
You can load a specific version of the package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/editorjs-inline-image).
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](https://unsplash.com/documentation#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](https://kommit.co)
[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