@7polo/editorjs-image v1.0.9

Image

Image Tool for Editor.js 2.0

Feature

• Embed Url ✌️
• Unsplash ✌️
• upload ✌️
• extend
• image viewer ✌️ (use by viewerjs)

tab

embed url

upsplash

upload

extend

just add any tab you wanted

viewer

just double click the image

Usage

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

1. npm

npm i @7polo/editorjs-image

2. init & config

var editor = EditorJS({
  ...
  tools: {
    ...
    image: {
        class: Image,
        config: {
            unsplash: {
                search: ()=> {
                    return new Promise(function(resolve){
                        // resp from api : https://api.unsplash.com/search/photos 
                        resolve({});
                    })
                }
            },
            upload: {
                doUplaod: ()=> {
                    return new Promise(function(resolve){
                        resolve({url});
                    })
                }
            }
        }
    }
  }
  ...
});

Config Params

unsplash.search like this

export const searchImages = (query) => {
    console.log("search" + query)

    return axios.get(`https://api.unsplash.com/search/photos`, {
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Credentials': false,
            'Content-Type':'application/x-www-form-urlencoded'
        },
        params: {
            client_id: 'your client_id',
            query
        }
    })
}

Output data

This Tool returns code.

{
  "type" : "image",
  "data" : {
    "url" : "https://www.example.com/image.jpg",
    "withBorder" : false,
    "withBackground" : false,
    "stretched" : true
  }
}