https://github.com/editor-js/personality
Personality Tool for Editor.js
https://github.com/editor-js/personality
Last synced: 4 months ago
JSON representation
Personality Tool for Editor.js
- Host: GitHub
- URL: https://github.com/editor-js/personality
- Owner: editor-js
- Created: 2017-04-22T13:33:02.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-02-06T13:37:52.000Z (over 3 years ago)
- Last Synced: 2025-09-20T10:26:13.163Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 574 KB
- Stars: 43
- Watchers: 0
- Forks: 27
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personality Tool
Personality Tool for the [Editor.js](https://editorjs.io).
## 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](#server-format) for more details.
## Get the package
You can get the package using any of these ways.
### Install via NPM
Get the package
```shell
npm i --save-dev @editorjs/personality
```
Include module at your application
```javascript
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/personality@2.0.0).
`https://cdn.jsdelivr.net/npm/@editorjs/personality@2.0.0`
Then require this script on page with Editor.js through the `` tag.
## Usage
Add a new Tool to the `tools` property of the Editor.js initial config.
```javascript
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](https://github.com/codex-team/ajax#accept-string).|
| 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. |
```json
{
"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:**
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:
```json5
{
"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.