Django CKEditor - youtube embeded video disappear after saving at admin panel

Question

There is no problem with uploading. But when I lookup to the article for editing then I can't see youtube video

Before saving:

After Saving:

But actually the iframe block at there. The problem is I can't see it at admin panel again

settings.py

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'CMS',
        'width': '100%',
        'toolbar_CMS': [
            ['Format', 'Styles', 'FontSize'],
            [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
            ['TextColor', 'BGColor'],
            ['Link', 'Unlink'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['Undo', 'Redo'],
            ['Copy', 'Paste', 'PasteText', 'PasteFromWord'],
            ['SelectAll', 'Find', 'Replace'],
            ['NumberedList', 'BulletedList'],
            ['Outdent', 'Indent'],
            ['Smiley', 'SpecialChar', 'Blockquote', 'HorizontalRule'],
            ['Table', 'Image', 'Youtube'],
            ['ShowBlocks', 'Source', 'About']
            
        ],
        'extraPlugins': 'youtube',
        'contentsCss': (
            '/staticfiles/ckeditor/customization-files/style.css',
            '/staticfiles/ckeditor/customization-files/bootstrap.css',
        ),
    },
}

CKEDITOR_UPLOAD_PATH = 'content/ckeditor/'

models.py

class Article(models.Model):
    title = models.CharField(max_length=200)
    content = RichTextField(
        extra_plugins=['youtube'],
        null = False,
        blank=False,
        external_plugin_resources=[(
            'youtube',
            '/staticfiles/ckeditor/extra_plugins/youtube/',
            'plugin.js',
        )],
        )
    updated = models.DateField(auto_now=True)
    created = models.DateField(auto_now_add=True)

Django version: 3.2.3 django-ckeditor version: 6.1.0

Additionaly detail: When I click to "See HTML source" and save article then even the current video removing from database

Answer 1

After trying it myself a bit, I came to the answer described here.

Include this in your configuration:

config.extraAllowedContent = 'iframe[*]'

It allows iframe-tags in your editor.

Answer 2

Basing on this comment, I added

"removePlugins": ["stylesheetparser", "iframe"],

into "default" section in my CKEDITOR_CONFIGS = {} in settings.py

After this modification, all embed videos became visible in CKEditor in admin panel after pressing "Save" button and after closing and reopening tab containing CKEditor

Answer 3

In my case it's caused by missing configuration.

My configuration was as follows:

'extraPlugins': ','.join([
            ...
            'autoembed',
            'embedsemantic',
            ...
        ]),
        'embed_provider': '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}&api_key=' + IFRAMELY_API_KEY,

When I click Save button, content stored in the database didn't include iframe tag:

<oembed>https://www.youtube.com/watch?v=F6oi-J740kk</oembed>\r+

So my solution was to enable embedbase and embed plugins in the configuration:

'extraPlugins': ','.join([
            ...
            'autoembed',
            'embedsemantic',
            'embedbase', //<---This
            'embed',     //<---This
            ...
        ]),
        'embed_provider': '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}&api_key=' + IFRAMELY_API_KEY,
        'extraAllowedContent': 'iframe[*]', // <--- Fixes disappearing issue

After that, the content in the database contains iframe tag:

<div style="height:0; left:0; padding-bottom:56.25%; position:relative;
 width:100%"><iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;" allowfullscreen="" scrolling="no" src
="https://www.youtube.com/embed/F6oi-J740kk?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;"></iframe></div>\r