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=""></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?

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./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?

• javascript
• angular
• ckeditor
• ckeditor5

• @YamenAshraf No, I decided not to use this editor. – Pavel Commented Jul 16, 2019 at 14:45

2 Answers 2

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.

In CKEditor5 it quite easy now to integrate the embed media feature by just :

• install the media-embed package , npm install --save @ckeditor/ckeditor5-media-embed
• add the 'media embed' to your toolbar config
  As @jbgt mentioned previobale providers are limited, so maybe you need to use external libraries like iframely: https://iframely./docs/ckeditor as they remend in the doc .. I hope they add an easier way to fix this..