Skip to content

Latest commit

 

History

History
131 lines (91 loc) · 3.9 KB

README.md

File metadata and controls

131 lines (91 loc) · 3.9 KB
Raw

Personality Tool

Personality Tool for the Editor.js.

Features

This tool allows you to create Personality block in your articles.

Note Tool requires server-side implementation for image uploading. See backend response format for more details.

Get the package

You can get the package using any of these ways.

Install via NPM

Get the package

npm i --save-dev @editorjs/personality

Include module at your application

const Personality = require('@editorjs/personality');

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/[email protected]

Then require this script on page with Editor.js through the <script src=""></script> tag.

Usage

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

var editor = EditorJS({
  ...

  tools: {
    ...
    personality: {
      class: Personality,
      config: {
        endpoint: 'http://localhost:8008/uploadFile'  // Your backend file uploader endpoint
      }
    }
  }

  ...
});

Config Params

Personality Tool supports these configuration parameters:

Field Type Description
endpoint string Required Endpoint for photo uploading.
field string (default: image) Name of uploaded image field in POST request
types string (default: image/*) Mime-types of files that can be accepted with file selection.
namePlaceholder string (default: Name) Placeholder for name field
descriptionPlaceholder string (default: Description) Placeholder for description field
linkPlaceholder string (default: Link) Link field placeholder

Output data

This Tool returns data with following format

Field Type Description
name string Person's name
description string Person's description
link string Link to person's website
photo string Uploaded image url from backend. 
{
    "type" : "personality",
    "data" : {
        "name" : "Elon Musk",
        "description" : "Elon Reeve Musk FRS is a technology entrepreneur, investor, and engineer. He holds South African, Canadian, and U.S. citizenship and is the founder",
        "link" : "https://twitter.com/elonmusk",
        "photo" : "https://capella.pics/3c0e1b97-bc56-4961-b54e-2a6c2c3260f2.jpg"
    }
}

Backend response format

This Tool works with uploading files from the device

Scenario:

  1. User select file from the device
  2. Tool sends it to your backend (on config.endpoint.byFile route)
  3. Your backend should save file and return file data with JSON at specified format.
  4. Personality tool shows saved image and stores server answer

So, you can implement backend for file saving by your own way. It is a specific and trivial task depending on your environment and stack.

Response of your uploader should cover following format:

{
    "success" : 1,
    "file": {
        "url" : "https://capella.pics/3c0e1b97-bc56-4961-b54e-2a6c2c3260f2.jpg"
    }
}

success - uploading status. 1 for successful, 0 for failed

file - uploaded file data. Must contain an url field with full public path to the uploaded image.