Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

winton/simple-image

Open more actions menu
 
 

Repository files navigation

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

About

Simple Image Tool for Editor.js 2.0

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 84.0%
  • CSS 16.0%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.