Provides Block tool for embedded content for the Editor.js.
Based on editor-js/embed.
service
— is a service name that will be saved to Tool's output JSON
- YouTube -
youtube
service - Twitch -
twitch-video
service for videos - 👇 Any other customized service
Get the package
$ npm i editorjs-embed-control
Include module at your application
import EmbedControl from 'editorjs-embed-control';
You can load a specific version of the package from jsDelivr CDN.
Require this script on a page with Editor.js.
<script src="https://cdn.jsdelivr.net/npm/editorjs-embed-control"></script>
- Upload folder
dist
from repository - Add
dist/embed.umd.js
file to your page.
Add a new Tool to the tools
property of the Editor.js initial config.
var editor = EditorJS({
...
tools: {
...
embed: EmbedControl,
},
...
});
Embed Tool supports some services by default (see above). You can specify services you would like to use:
var editor = EditorJS({
...
tools: {
...
embed: {
class: EmbedControl,
config: {
services: {
youtube: true,
twitch-video: false
}
}
},
},
...
});
Note that if you pass services you want to use like in the example above, others will not be enabled.
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: EmbedControl,
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/')
}
}
}
},
},
...
});
You can take the configs from the original project: https://github.com/editor-js/embed/blob/master/src/services.js
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: EmbedControl,
inlineToolbar: true
},
},
...
});
You can change the module name, labels and service names:
var editor = EditorJS({
...
tools: {
...
embed: EmbedControl,
},
i18n: {
messages: {
toolNames: {
"Video": "Видео"
},
tools: {
embed: {
'Enter a link': 'Вставьте ссылку',
'Enter a caption': 'Подпись',
'Support services:': 'Поддерживаемые сервисы:',
'youtube': 'YouTube',
...
}
}
}
},
...
});
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"
}
}