Embed Tool

Provides Block tool for embedded content for the Editor.js.
Tool uses Editor.js pasted patterns handling and inserts iframe with embedded content.

List of services supported

> service — is a service name that will be saved to Tool's output JSON

- Facebook - facebook service
- Instagram - instagram service
- YouTube - youtube service
- X - twitter service. (official twitter api is used for render, no need to use twitframe)
- Twitch - twitch-video service for videos and twitch-channel for channels
- Miro - miro service
- Vimeo — vimeo service
- Gfycat — gfycat service
- Imgur — imgur service
- Vine - vine service. The project is in archive state now
- Aparat - aparat service
- Yandex.Music - yandex-music-track service for tracks, yandex-music-album for albums and yandex-music-playlist for playlists
- Coub — coub service
- CodePen — codepen service
- Pinterest - pinterest service
- GitHub Gist - github service
- Reddit - reddit service
- Figma - figma service
- Whimsical - whimsical service
- 👇 Any other customized service

Installation

Get the package

``shell
yarn add @editorjs/embed
`

Include module at your application

`javascript
import Embed from '@editorjs/embed';
`

Optionally, you can load this tool from CDN JsDelivr CDN

Usage

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

`javascript
var editor = EditorJS({
...

tools: {
...
embed: Embed,
},

...
});
`

Available configuration

$3

Embed Tool supports some services by default (see above). You can specify services you would like to use:

`javascript
var editor = EditorJS({
...

tools: {
...
embed: {
class: Embed,
config: {
services: {
youtube: true,
coub: true
}
}
},
},

...
});
`

> Note that if you pass services you want to use like in the example above, others will not be enabled.

$3

You can provide your own services using simple configuration.

First, you should create a Service configuration object. It contains following fields:

| Field | Type | Description |
| ---------- | ---------- | ----------- |
| regex | RegExp | Pattern of pasted URLs. You should use regexp groups to extract resource id
| embedUrl | string | Url of resource\s embed page. Use <%= remote_id %> to substitute resource identifier
| html | string | HTML code of iframe with embedded content. embedUrl will be set as iframe src
| height | number | _Optional_. Height of inserted iframe
| width | number | _Optional_. Width of inserted iframe
| id | Function | _Optional_. If your id is complex you can provide function to make the id from extraced regexp groups

Example:

``javascript
{
regex: /https?:\/\/codepen.io\/([^\/\?\&])\/pen\/([^\/\?\&])/,
embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
html: "",
height: 300,
width: 600,
id: (groups) => groups.join('/embed/')
}
`

When you create a Service configuration object, you can provide it with Tool\s configuration:

``javascript
var editor = EditorJS({
...

tools: {
...
embed: {
class: Embed,
config: {
services: {
youtube: true,
coub: true,
codepen: {
regex: /https?:\/\/codepen.io\/([^\/\?\&])\/pen\/([^\/\?\&])/,
embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
html: "",
height: 300,
width: 600,
id: (groups) => groups.join('/embed/')
}
}
}
},
},

...
});
`

#### Inline Toolbar

Editor.js provides useful inline toolbar. You can allow it\s usage in the Embed Tool caption by providing inlineToolbar: true.

``javascript
var editor = EditorJS({
...

tools: {
...
embed: {
class: Embed,
inlineToolbar: true
},
},

...
});
`

Output data

| Field | Type | Description
| ------- | -------- | -----------
| service | string | service unique name
| source | string | source URL
| embed | string | URL for source embed page
| width | number | embedded content width
| height | number | embedded content height
| caption | string | content caption

`json
{
"type" : "embed",
"data" : {
"service" : "coub",
"source" : "https://coub.com/view/1czcdf",
"embed" : "https://coub.com/embed/1czcdf",
"width" : 580,
"height" : 320,
"caption" : "My Life"
}
}
``

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 for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.

| 🌐 | Join 👋 | Twitter | Instagram |
| -- | -- | -- | -- |
| codex.so | codex.so/join |@codex_team | @codex_team |