febincloudyuga / simple-image-tutorial

Final result of guide series learning how to create own Block Tool

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