Final result of guide series learning how to create own Block Tool for Editor.js
Simple Image — paste image URL and get the image Block rendered.
Also supports pasting files and substitutions of <img> tags on pasting.
Does not support uploading images from the device.
- The first plugin
- Fill Block with saved data
- Saved data validation
- Changing a view
- Enable Inline Toolbar
- Making a Block Settings
- Access Editor's API
- Paste substitutions
- Sanitize saved data
- Provide custom configuration
Note. If you want to use such tool in production, see full-featured Simple Image Tool. The tutorial code and functionality are simplified for better understanding of basics API usage.
This Tool supports following configuration properties:
| name | description |
|---|---|
placeholder | Custom placeholder for «Paste URL» field |
Example of connection:
/** * Initialize the Editor */consteditor=newEditorJS({autofocus: true,tools: {image: {class: SimpleImage,inlineToolbar: true,config: {placeholder: 'Paste image URL'}}},});This Tool return following data format:
{
url: 'https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_1280.jpg'
caption: 'Image caption example',withBorder: false,withBackground: false,stretched: false}| field | type | description |
|---|---|---|
url | string | image source URL |
caption | string | image caption |
withBorder | boolean | flag for adding a border |
withBackground | boolean | flag for adding a background |
stretched | boolean | flag for stretching image to the full width of content |