SimpleImage Tool for Editor.js
npm install @flowinity/tpu-simple-image
Provides Image Blocks for the Editor.js.
Works only with pasted image URLs and requires no server-side uploader.
Get the package
``shell`
npm i --save-dev @editorjs/simple-image
Include module at your application
`javascript`
const SimpleImage = require('@editorjs/simple-image');
1. Upload folder dist from repositorydist/bundle.js
2. Add file to your page.
You can load specific version of package from jsDelivr CDN.
https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest
Then require this script on page with Editor.js.
`html`
Add a new Tool to the tools property of the Editor.js initial config.
`javascript`
var editor = EditorJS({
...
tools: {
...
image: SimpleImage,
}
...
});
This Tool has no config params
1. Add border
2. Stretch to full-width
3. Add background
| Field | Type | Description |
| -------------- | --------- | ------------------------------- |
| url | string | image's url |string
| caption | | image's caption |boolean
| withBorder | | add border to image |boolean
| withBackground | | need to add background |boolean
| stretched | | stretch image to screen's width |
`json``
{
"type" : "image",
"data" : {
"url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
"caption" : "Roadster // tesla.com",
"withBorder" : false,
"withBackground" : false,
"stretched" : true
}
}