@7polo/editorjs-image 中文文档教程

Question

Image

Editor.js 2.0 的图像工具

Feature

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

tab

embed url

upsplash

upload

extend

只需添加您想要

---

viewer

的任何选项卡 只需双击图像

---

Usage

添加一个新工具到 Editor.js 初始配置的 tools 属性。

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

Field	Type	Description
unsplash.search	function	response from unsplash https://api.unsplash.com/search/photos

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

此工具返回代码。

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