@editorjs/embed v2.7.2
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 - Twitter -
twitter
service. (official twitter api is used for render, no need to use twitframe) - Twitch -
twitch-video
service for videos andtwitch-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 andyandex-music-playlist
for playlists - Coub —
coub
service - CodePen —
codepen
service - Pinterest -
pinterest
service - GitHub Gist -
github
service - 👇 Any other customized service
Installation
Get the package
yarn add @editorjs/embed
Include module at your application
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.
var editor = EditorJS({
...
tools: {
...
embed: Embed,
},
...
});
Available configuration
Enabling / disabling services
Embed Tool supports some services by default (see above). You can specify services you would like to use:
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.
Add more services
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:
{
regex: /https?:\/\/codepen.io\/([^\/\?\&]*)\/pen\/([^\/\?\&]*)/,
embedUrl: 'https://codepen.io/<%= remote_id %>?height=300&theme-id=0&default-tab=css,result&embed-version=2',
html: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
height: 300,
width: 600,
id: (groups) => groups.join('/embed/')
}
When you create a Service configuration object, you can provide it with Tool`s configuration:
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: "<iframe height='300' scrolling='no' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>",
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
.
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 |
{
"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 👋 | ||
---|---|---|---|
codex.so | codex.so/join | @codex_team | @codex_team |
5 months ago
6 months ago
11 months ago
12 months ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
6 years ago