{@snippet features/build-media-source}
The {@link module:media-embed/mediaembed~MediaEmbed} feature brings a basic support for embeddable, synchronous media in the editor content.
{@snippet features/media-embed}
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( ... );
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:
<figure class="media">
<div data-oembed-url="https://url">
<iframe src="https://preview"></iframe>
</div>
</figure>
<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>
The {@link module:media-embed/mediaembed~MediaEmbed} plugin registers:
'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' } );
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-media-embed.