Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/editor-js/link
Link Tool for Editor.js 2.0
https://github.com/editor-js/link
codex codex-editor editor link-embed link-plugin
Last synced: 7 days ago
JSON representation
Link Tool for Editor.js 2.0
- Host: GitHub
- URL: https://github.com/editor-js/link
- Owner: editor-js
- License: mit
- Created: 2017-04-25T02:15:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-01T10:43:29.000Z (4 months ago)
- Last Synced: 2024-10-29T20:55:55.323Z (10 days ago)
- Topics: codex, codex-editor, editor, link-embed, link-plugin
- Language: JavaScript
- Homepage:
- Size: 981 KB
- Stars: 87
- Watchers: 4
- Forks: 78
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - @editorjs/link
README
# Link Tool
Link Block for the [Editor.js](https://codex.so/editor).
## Features
Allows adding link previews to your articles.
**Note:** this Tool requires server-side implementation for link data fetching. See [backend response format](#server-format) for more details.
## Installation
Get the package
```shell
yarn add @editorjs/link
```
Include module at your application
```javascript
import LinkTool from '@editorjs/link';
```
Optionally, you can load this tool from CDN [JsDelivr CDN](https://cdn.jsdelivr.net/npm/@editorjs/link@latest)
## Usage
Add a new Tool to the `tools` property of the Editor.js initial config.
```javascript
const editor = EditorJS({
...
tools: {
...
linkTool: {
class: LinkTool,
config: {
endpoint: 'http://localhost:8008/fetchUrl', // Your backend endpoint for url data fetching,
}
}
},
...
});
```
## Config Params
Link Tool supports these configuration parameters:
| Field | Type | Description |
| ---------|-------------|------------------------------------------------|
| endpoint | `string` | **Required:** the endpoint for link data fetching. |
| headers | `object` | **Optional:** the headers used in the GET request. |
## Output data
This Tool returns `data` with following format
| Field | Type | Description |
| -------------- | --------- | ------------------------------- |
| link | `string` | Pasted link's url |
| meta | `object` | Fetched link's data. Any data got from the backend. Currently, the plugin's design supports the 'title', 'image', and 'description' fields. |
```json
{
"type" : "linkTool",
"data" : {
"link" : "https://codex.so",
"meta" : {
"title" : "CodeX Team",
"site_name" : "CodeX",
"description" : "Club of web-development, design and marketing. We build team learning how to build full-valued projects on the world market.",
"image" : {
"url" : "https://codex.so/public/app/img/meta_img.png"
}
}
}
}
```
You can implement a backend for link data fetching your own way. It is a specific and trivial task depending on your
environment and stack.
Backend response **should** cover following format:
```json5
{
"success" : 1,
"link": "https://codex.so", // Optionally return a link to set the hyperlink URL
"meta": {
// ... any fields you want
}
}
```
**success** — uploading status. 1 for successful, 0 for failed
**link** - Optional response parameter to override the URL provided
**meta** — link fetched data.
Currently, the plugin's design supports the 'title', 'image', and 'description' fields. They should have the following format in the response:
```json5
{
"success" : 1,
"meta": {
"title" : "CodeX Team",
"description" : "Club of web-development, design and marketing. We build team learning how to build full-valued projects on the world market.",
"image" : {
"url" : "https://codex.so/public/app/img/meta_img.png"
}
}
}
```
Also, it can contain any additional fields you want to store.
# About CodeX
CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are [open](https://codex.so/join) for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.
| 🌐 | Join 👋 | Twitter | Instagram |
| -- | -- | -- | -- |
| [codex.so](https://codex.so) | [codex.so/join](https://codex.so/join) |[@codex_team](http://twitter.com/codex_team) | [@codex_team](http://instagram.com/codex_team/) |