media-embed.md 2.6 KB


category: features

{@snippet features/build-media-source}

Media embed

The {@link module:media-embed/mediaembed~MediaEmbed} feature brings a basic support for embeddable, synchronous media in the editor content.

Demo

Example URLs

{@snippet features/media-embed}

Installation

To add this feature to your editor, install the @ckeditor/ckeditor5-media-embed package:

npm install --save @ckeditor/ckeditor5-media-embed

Then add 'MediaEmbed' to your plugin list and configure the media providers:

import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/table';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ MediaEmbed, ... ],
		toolbar: [ 'mediaEmbed', ... ]
		mediaEmbed: {
			...
		}
	} )
	.then( ... )
	.catch( ... );

Configuration

Output type

To satisfy most of the use–cases, the feature can be configured using the {@link module:media-embed/mediaembed~MediaEmbedConfig#semanticDataOutput semanticDataOutput} option to output different kind data:

  • Non–semantic (default) – outputs media in the same way it works 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>
  • Semantic – does not include the preview of the media, just just the <oembed> tag with the url attribute. Best when the application processes (expands) the media on the server–side or directly in the front–end, preserving the versatile database representation.
   <figure class="media">
   	<oembed url="https://url"></oembed>
   </figure>

Media providers

Common API

The {@link module:media-embed/mediaembed~MediaEmbed} plugin registers:

  • the 'mediaEmbed' UI button component,
  • the 'mediaEmbed' command implemented by {@link module:media-embed/insertmediacommand~InsertMediaCommand}.

    You can insert a new media or update the selected media URL by executing the following code:

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

Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-media-embed.