xws-editor-outlink

Link Tool

Link Block for the Editor.js.

Features

Allows to add link previews to your articles.

Note: this Tool requires server-side implementation for link data fetching. See backend response format for more details.

Installation

Install via NPM

Get the package

npm i --save-dev xws-editor-outlink

Include module at your application

const LinkTool = require("xws-editor-outlink");

Download to your project's source dir

1. Download folder dist from repository
2. Add dist/bundle.js file to your page.

Usage

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

var 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: endpoint for link data fetching.

Output data

This Tool returns data with following format

Field	Type	Description
link	string	Pasted link url
meta	object	Fetched link data. Any data got from backend. Currently title, image and description are supported by plugin's design.

{
  "type": "linkTool",
  "data": {}
}

Backend response format

You can implement 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:

{
  success: 1,
  meta: {
    // ... any fields you want
  }
}

Also, can contain any additional fields you want to store.