Personality Tool for the Editor.js.
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.
You can get the package using any of these ways.
Get the package
npm i --save-dev @editorjs/personality
Include module at your application
const Personality = require('@editorjs/personality');
dist
from repositorydist/bundle.js
file to your page.You can load specific version of package from jsDelivr CDN.
https://cdn.jsdelivr.net/npm/@editorjs/personality@2.0.0
Then require this script on page with Editor.js through the <script src="https://github.com/editor-js/personality/raw/master/"></script>
tag.
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
}
}
}
...
});
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 |
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"
}
}
This Tool works with uploading files from the device
Scenario:
config.endpoint.byFile
route)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.