@ckeditor/ckeditor5-media-embed

  • Version 41.4.2
  • Published
  • 726 kB
  • 2 dependencies
  • GPL-2.0-or-later license

Install

npm i @ckeditor/ckeditor5-media-embed
yarn add @ckeditor/ckeditor5-media-embed
pnpm add @ckeditor/ckeditor5-media-embed

Overview

Media embed feature for CKEditor 5.

Index

Classes

class AutoMediaEmbed

class AutoMediaEmbed extends Plugin {}
  • The auto-media embed plugin. It recognizes media links in the pasted content and embeds them shortly after they are injected into the document.

constructor

constructor(editor: Editor);

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [any, any, any];

method init

init: () => void;

class MediaEmbed

class MediaEmbed extends Plugin {}
  • The media embed plugin.

    For a detailed overview, check the .

    This is a "glue" plugin which loads the following plugins:

    * The , * The and * The .

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [
typeof MediaEmbedEditing,
typeof MediaEmbedUI,
typeof AutoMediaEmbed,
any
];

class MediaEmbedCommand

class MediaEmbedCommand extends Command {}
  • The insert media command.

    The command is registered by the as 'mediaEmbed'.

    To insert media at the current selection, execute the command and specify the URL:

    editor.execute( 'mediaEmbed', 'http://url.to.the/media' );

property value

value: string;
  • Media url.

method execute

execute: (url: string) => void;
  • Executes the command, which either:

    * updates the URL of the selected media, * inserts the new media into the editor and puts the selection around it.

    execute

    Parameter url

    The URL of the media.

method refresh

refresh: () => void;

class MediaEmbedEditing

class MediaEmbedEditing extends Plugin {}
  • The media embed editing feature.

constructor

constructor(editor: Editor);

property pluginName

static readonly pluginName: string;

property registry

registry: MediaRegistry;
  • The media registry managing the media providers in the editor.

method init

init: () => void;

class MediaEmbedToolbar

class MediaEmbedToolbar extends Plugin {}
  • The media embed toolbar plugin. It creates a toolbar for media embed that shows up when the media element is selected.

    Instances of toolbar components (e.g. buttons) are created based on the .

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [any];

method afterInit

afterInit: () => void;

class MediaEmbedUI

class MediaEmbedUI extends Plugin {}
  • The media embed UI plugin.

property pluginName

static readonly pluginName: string;

property requires

static readonly requires: readonly [typeof MediaEmbedEditing];

method init

init: () => void;

Interfaces

interface MediaEmbedConfig

interface MediaEmbedConfig {}
  • The configuration of the media embed features.

    Read more about .

    ClassicEditor
    .create( editorElement, {
    mediaEmbed: ... // Media embed feature options.
    } )
    .then( ... )
    .catch( ... );

    See .

property elementName

elementName?: string;
  • Overrides the element name used for "semantic" data.

    This is not relevant if is set to true.

    When not set, the feature produces the <oembed> tag:

    <figure class="media">
    <oembed url="https://url"></oembed>
    </figure>

    To override the element name with, for instance, the o-embed name:

    mediaEmbed: {
    elementName: 'o-embed'
    }

    This will produce semantic data with the <o-embed> tag:

    <figure class="media">
    <o-embed url="https://url"></o-embed>
    </figure>

    'oembed'

property extraProviders

extraProviders?: Array<MediaEmbedProvider>;
  • The additional media providers supported by the editor. This configuration helps extend the default .

    ClassicEditor
    .create( editorElement, {
    plugins: [ MediaEmbed, ... ],
    mediaEmbed: {
    extraProviders: [
    {
    name: 'extraProvider',
    url: /^example\.com\/media\/(\w+)/,
    html: match => '...'
    },
    ...
    ]
    }
    } )
    .then( ... )
    .catch( ... );

    See the to learn more.

property previewsInData

previewsInData?: boolean;
  • Controls the data format produced by the feature.

    When false (default), the feature produces "semantic" data, i.e. it does not include the preview of the media, just the <oembed> tag with the url attribute:

    <figure class="media">
    <oembed url="https://url"></oembed>
    </figure>

    When true, the media is represented in the output in the same way it looks in the editor, i.e. the media preview is saved to the database:

    <figure class="media">
    <div data-oembed-url="https://url">
    <iframe src="https://preview"></iframe>
    </div>
    </figure>

    **Note:** Media without preview are always represented in the data using the "semantic" markup regardless of the value of the previewsInData. Learn more about different kinds of media in the configuration description.

    false

property providers

providers?: Array<MediaEmbedProvider>;
  • The default media providers supported by the editor.

    The names of providers with rendering functions (previews):

    * "dailymotion", * "spotify", * "youtube", * "vimeo"

    The names of providers without rendering functions:

    * "instagram", * "twitter", * "googleMaps", * "flickr", * "facebook"

    See the to learn more about different kinds of media and media providers.

    **Note**: The default media provider configuration may not support all possible media URLs, only the most common are included.

    Media without rendering functions are always represented in the data using the "semantic" markup. See to learn more about possible data outputs.

    The priority of media providers corresponds to the order of configuration. The first provider to match the URL is always used, even if there are other providers that support a particular URL. The URL is never matched against the remaining providers.

    To discard **all** default media providers, simply override this configuration with your own :

    ClassicEditor
    .create( editorElement, {
    plugins: [ MediaEmbed, ... ],
    mediaEmbed: {
    providers: [
    {
    name: 'myProvider',
    url: /^example\.com\/media\/(\w+)/,
    html: match => '...'
    },
    ...
    ]
    }
    } )
    .then( ... )
    .catch( ... );

    You can take inspiration from the default configuration of this feature which you can find in: https://github.com/ckeditor/ckeditor5-media-embed/blob/master/src/mediaembedediting.js

    To **extend** the list of default providers, use .

    To **remove** certain providers, use .

property removeProviders

removeProviders?: Array<string>;
  • The list of media providers that should not be used despite being available in and

    mediaEmbed: {
    removeProviders: [ 'youtube', 'twitter' ]
    }

property toolbar

toolbar?: Array<ToolbarConfigItem>;
  • Items to be placed in the media embed toolbar. This option requires adding to the plugin list.

    Read more about configuring toolbar in .

Package Files (8)

Dependencies (2)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@ckeditor/ckeditor5-media-embed.

  • Markdown
    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@ckeditor/ckeditor5-media-embed)
  • HTML
    <a href="https://www.jsdocs.io/package/@ckeditor/ckeditor5-media-embed"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>