Skip to content
Simple Image Tool for Editor.js 2.0
Branch: master
Clone or download
dimensi and gohabereg Update README.md for new namespace (#11)
* Update README.md

* Bump version to update readme on npm
Latest commit d72369b Apr 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets update readme Jul 30, 2018
dist Feature/renaming (#8) Mar 2, 2019
src Feature/renaming (#8) Mar 2, 2019
.gitignore initial version Jul 30, 2018
.npmignore Feature/renaming (#8) Mar 2, 2019
LICENSE add license Jul 30, 2018
README.md Update README.md for new namespace (#11) Apr 5, 2019
package.json
webpack.config.js Feature/renaming (#8) Mar 2, 2019
yarn.lock Feature/renaming (#8) Mar 2, 2019

README.md

Simple Image Tool

Provides Image Blocks for the Editor.js.

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

Installation

Install via NPM

Get the package

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

Include module at your application

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

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://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest

Then require this script on page with Editor.js.

<script src="..."></script>

Usage

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

var editor = EditorJS({
  ...
  
  tools: {
    ...
    image: SimpleImage,
  }
  
  ...
});

Config Params

This Tool has no config params

Tool's settings

  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
{
    "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
    }
}
You can’t perform that action at this time.