https://github.com/editor-js/simple-image

Simple Image Tool for Editor.js 2.0
https://github.com/editor-js/simple-image

codex codex-editor editor image plugin serverless

Last synced: 3 months ago
JSON representation

Simple Image Tool for Editor.js 2.0

• Host: GitHub
• URL: https://github.com/editor-js/simple-image
• Owner: editor-js
• License: mit
• Created: 2018-07-30T13:13:50.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-11-18T20:09:09.000Z (12 months ago)
• Last Synced: 2024-07-09T15:06:46.834Z (4 months ago)
• Topics: codex, codex-editor, editor, image, plugin, serverless
• Language: JavaScript
• Homepage:
• Size: 3.82 MB
• Stars: 51
• Watchers: 3
• Forks: 63
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-editorjs - @editorjs/simple-image - side uploader required (Tools / Block Tools)

README

        
![](https://badgen.net/badge/Editor.js/v2.0/blue)

# Simple Image Tool

Provides Image Blocks for the [Editor.js](https://editorjs.io).

Works only with pasted image URLs and requires no server-side uploader.

![](assets/image-uploading.gif)

## Installation

Get the package

```shell

yarn add @editorjs/simple-image

```

Include module at your application

```javascript

import SimpleImage from "@editorjs/simple-image";

```

Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/simple-image)

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript

var editor = EditorJS({

  ...

  tools: {

    ...

    image: SimpleImage,

  }

  ...

});

```

## Config Params

This Tool has no config params

## Tool's settings

![](https://capella.pics/c74cdeec-3405-48ac-a960-f784188cf9b4.jpg)

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` | need to add background          |

| stretched      | `boolean` | 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

  }

}

```