Ckeditor5 + Angular: how to display video added via editor

Question

I want to use CKEditor5 in my Angular7 application and faced the following problem:

when I add a video from YouTube, using 'mediaEmbed' option in editor config, editor returns html like this:

    <figure class="media"><oembed url="https://www.youtube.com/watch?v=6DDqkpR65Ak"></oembed></figure>

The browser shows an error because it does not have information about the tag oembed.

The documentation suggests using third-party services to convert this tag, but I think this is not a good idea.

How can I solve this problem? Perhaps I should create a directive with the same name as this tag? Or maybe create a custom button to insert a video - is it possible? Perhaps there is a similar editor in which video insertion works out of the box and which supports the balloon menu?

Answer 1

I solved it using the following option:

htmlEditorConfig = {
    mediaEmbed: {
        previewsInData: true
    }
}

And then in my HTML:

<ckeditor ... [config]="htmlEditorConfig"></ckeditor>

If you are using Angular, you will need to sanitize the string for Angular to display the media, with someting like:

import { DomSanitizer } from '@angular/platform-browser';
...
contructor(private sanitizer: DomSanitizer) {}
...
this.sanitizer.bypassSecurityTrustHtml(str);

This solution will only work with some providers (YouTube, Vimeo...), you'll find the full list in the docs.

==============================

According to the docs, here is how the previewsInData option works:

Including previews in data

Optionally, by setting mediaEmbed.previewsInData to true you can configure the media embed feature to output media in the same way they look in the editor. So if the media element is “previewable”, the media preview (HTML) is saved to the database:

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

Currently, the preview is only available for content providers for which CKEditor 5 can predict the code: YouTube, Vimeo, Dailymotion, Spotify, etc. For other providers like Twitter or Instagram the editor cannot produce an code and it does not, so far, allow retrieving this code from an external oEmbed service. Therefore, for non-previewable media it produces the default semantic output:

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

This means that, unless you limited the list of providers to only those which are previewable, you need to make sure that the media are displayed on your website.