Neurotoxin Powered Marketing
    Wondering what’s next for npm?Check out our public roadmap! »

    @editorjs/embed

    2.4.6 • Public • Published

    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@latest

    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"
      }
    }

    Install

    npm i @editorjs/embed

    DownloadsWeekly Downloads

    5,959

    Version

    2.4.6

    License

    MIT

    Unpacked Size

    27.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar