2.7.2 • Published 5 months ago

@editorjs/embed v2.7.2

Weekly downloads
5,532
License
MIT
Repository
github
Last release
5 months ago

npm.io

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 and twitch-channel for channels
  • Miro - miro service
  • Vimeovimeo service
  • Gfycatgfycat service
  • Imgurimgur 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
  • Coubcoub service
  • CodePencodepen 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:

FieldTypeDescription
regexRegExpPattern of pasted URLs. You should use regexp groups to extract resource id
embedUrlstringUrl of resource`s embed page. Use <%= remote_id %> to substitute resource identifier
htmlstringHTML code of iframe with embedded content. embedUrl will be set as iframe src
heightnumberOptional. Height of inserted iframe
widthnumberOptional. Width of inserted iframe
idFunctionOptional. 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

FieldTypeDescription
servicestringservice unique name
sourcestringsource URL
embedstringURL for source embed page
widthnumberembedded content width
heightnumberembedded content height
captionstringcontent 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 👋TwitterInstagram
codex.socodex.so/join@codex_team@codex_team
@polo7/block-editorbyevolution@infinitebrahmanuniverse/nolb-_edi@everything-registry/sub-chunk-277editor-js-componenteditor-js-themefibs-editoreditorjs-reactgs-text-editordjitsudoreactadotailadsstudio-editorjshorul-editorhsl-strapi-plugin-react-editorjsilla-builderisha-rte-editor@dxbz/gs-t-components@emilienkopp/ejs-factory@emilienkopp/html-factory@om-mediaworks/shacl-form@djitsu/editorlike-watersarman-vue-editor-jssrinstallerssofa-ui-componentsstrapi-academy-plus-editorjsstrapi-editorjssmart-editorstd-pagestrapi-plugin-editorstrapi-plugin-editorjsstrapi-plugin-editorjs-fieldstrapi-plugin-k-editorjsstrapi-plugin-react-editorjs-extended-embedstrapi-plugin-react-editorjsmtxtrpcv2node-red-contrib-ui-editornuxt3-editorjsreact-editor-simple-imagereact-editor-simple-image.jsquickvue-editorjsui-duckumomega-foundationwonder-image@rainyland-dev/strapi-plugin-editorjs@smileeye.edu.vn/editor@softkit/strapi-plugin-react-editorjs@questflow/canvas@todokek/react-editor.js@tienlucky/storage@vt7/vue-editor@virtual-spirit/vspace-labs@kaniyarasu/react-editor.js@keystonejs-contrib/fields-editorjs@datahu/client@datahu/component@datahu/designer@fakel/rest-admin@chizhik/ui-lib@canburaks/fibs-editor@cromwell/admin-panel@culturehacklabs/genki-reloaded@itfin/components@itandu/admin-panel@highoutput/neyar@lotsof/carpenter@lotsof/json-schema-formblock-article-js@swiftease/atali-form@4kda/vuetify-cifrum-demo-app@wulperstudio/wulper-studio-editor@zdzcode/zc-web-vuejs-core@brandontle/react-editor.js@zalastax/nolb-_edi@rjgf/rj-components@rypock/react-frontend@hyype-inc/widget@ten24group/ui24@fireenjin/editor@carabi/ui@realmocean/editor@acf-int/strapi-plugin-editorjs@acf-int/strapi-plugin-react-editorjs@bigbossstudio/strapi-plugin-editorjsall-in-one-editorjs@madnesslabs/enjin-editorbyevolution-components@nwire/amit-design-systemchatnext-assistantchatnext-uichatnext-ui-assistant-app-teset@oak-digital/strapi-plugin-react-editorjs
2.7.2

5 months ago

2.7.1

6 months ago

2.7.0

11 months ago

2.6.0

12 months ago

2.5.3

2 years ago

2.5.2

2 years ago

2.5.1

3 years ago

2.5.0

3 years ago

2.4.6

3 years ago

2.4.3

3 years ago

2.4.2

3 years ago

2.4.5

3 years ago

2.4.4

3 years ago

2.4.1

4 years ago

2.4.0

4 years ago

2.3.0

4 years ago

2.3.1

4 years ago

2.2.1

5 years ago

2.2.0

6 years ago