https://github.com/PaulKinlan/simple-image

https://github.com/PaulKinlan/simple-image

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/PaulKinlan/simple-image
• Owner: PaulKinlan
• License: mit
• Created: 2020-01-08T09:40:09.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T13:53:34.000Z (almost 2 years ago)
• Last Synced: 2024-07-20T03:41:05.317Z (4 months ago)
• Language: JavaScript
• Size: 3.75 MB
• Stars: 11
• Watchers: 3
• Forks: 6
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-editorjs - simple-image-editorjs

README

        
Note: This is a fork of the SimpleImage repository. It adds in extra functionality such as a toolbar to add images (rather than just drag and drop) and uses blob URL's

to improve memory usage.

# 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

### Install via NPM

Get the package

```shell

npm i --save-dev simple-image-editorjs

```

Include module at your application

```javascript

const SimpleImage = require('simple-image-editorjs');

```

### Download to your project's source dir

1. Upload folder `dist` from repository

2. Add `dist/bundle.js` file to your page.

### Load from CDN

You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/simple-image-editorjs).

`https://cdn.jsdelivr.net/npm/simple-image-editorjs@latest`

Then require this script on page with Editor.js.

```html

```

## 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

    }

}

```