Simple Image tutorial project

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.

Chapters

• 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

Installation

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.

Configuration

This Tool supports following configuration properties:

name	description
placeholder	Custom placeholder for «Paste URL» field

Example of connection:

  /**
   * Initialize the Editor
   */
  const editor = new EditorJS({
    autofocus: true,
    tools: {
      image: {
        class: SimpleImage,
        inlineToolbar: true,
        config: {
          placeholder: 'Paste image URL'
        }
      }
    },
  });

Output data format

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