Skip to content
Embed Tool for Editor.js
Branch: master
Clone or download
gohabereg Feature/renaming (#9)
* Rename all occurences

* 2.2.0

* Update packages

* Fix dev command

* Fix bundle

* Fix test dependencies and imports

* Rename repo

* Create .npmignore

* Update README.md
Latest commit a99abc4 Mar 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Feature/renaming (#9) Mar 2, 2019
docs Update Sep 27, 2018
src Feature/renaming (#9) Mar 2, 2019
test Feature/renaming (#9) Mar 2, 2019
.babelrc Feature/renaming (#9) Mar 2, 2019
.gitignore
.npmignore Feature/renaming (#9) Mar 2, 2019
LICENSE.md Initial Sep 7, 2018
README.md Feature/renaming (#9) Mar 2, 2019
package.json Feature/renaming (#9) Mar 2, 2019
webpack.config.js Feature/renaming (#9) Mar 2, 2019
yarn.lock Feature/renaming (#9) Mar 2, 2019

README.md

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.

Installation

Install via NPM

Get the package

npm i --save-dev @editorjs/embed

Include module at your application

const Embed = require('@editorjs/embed');

Download to your project's source dir

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

Load from CDN

You can load specific version of package from jsDelivr CDN.

https://cdn.jsdelivr.net/npm/@editorjs/embed@2.0.0

Then require this script on page with Editor.js.

<script src="..."></script>

Usage

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

var editor = EditorJS({
  ...

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

  ...
});

Available configuration

Embed Tool supports some services by default (see the full list here). 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.

Also you can provide your own services using simple configuration.

First of all 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"
  }
}
You can’t perform that action at this time.