Embed does not render in CKEditor 5

Created on 6 February 2023, over 1 year ago
Updated 23 February 2023, over 1 year ago

While evaluating the module I noticed that when using the Drupal core media embed functionality with CKEditor 5 that the YouTube videos do not render in CKEditor.

After saving these render fine on the actual webpage.

πŸ’¬ Support request
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States PCate

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @PCate
  • πŸ‡ΊπŸ‡ΈUnited States PCate

    Just a followup. The embed is not displaying in CKEditor 5 appears to be because the actual module's lite_youtube_embedlibrary isn't loading when the CKEditor 5 media embed is added. The lite-youtube element is inserted, but without the JS/CSS it isn't obviously displaying anything. When I manually loaded the library on all pages in a quick custom module, the embed element does render.

    Another issue is however that CKEditor 5 inserts the lite-youtube element in a figure tag that has display: table. That causes the sizing of the thumbnail to be tiny.

  • πŸ‡¦πŸ‡ΉAustria agoradesign

    well, that's not really a CKE5 specific problem. This is a general problem with embedded media: see ✨ CKEditor embedded media previews do not render with attached assets Active and #3085273: [Meta] Preview embedded media / entities in ckeditor β†’ . However I am not against including a workaround inside this module, as long as it's a quite elegant one

  • πŸ‡ΊπŸ‡ΈUnited States PCate

    However I am not against including a workaround inside this module, as long as it's a quite elegant one.

    For the library loading, one option would be create a simple CKEditor 5 plugin that loads the library when the media embed plugin is enabled. I think that can be achieved with a simple `lite_youtube_embed.ckeditor5.yml` file. Something like:

    media_lite_youtube_embed:
      provider: media
      ckeditor5:
        plugins:
          - drupalMedia.DrupalMedia
      drupal:
        label: lite_youtube_embed
        library: lite_youtube_embed/lite_youtube_embed
        elements:
          - <lite-youtube>
          - <lite-youtube videoid playlabel params>
        conditions:
          filter: media_embed
    

    The second issue with the figure tag with

    display: table

    might be more difficult...

  • πŸ‡¦πŸ‡ΉAustria agoradesign

    would be great, if you could verify your proposed fix.. unfortunately I cannot use CKE5 (and therefore also D10) atm, as we use linkit module in all our projects, and it is lacking CKE5 support unfortunately. hope this will get fixed soon

  • πŸ‡ΊπŸ‡ΈUnited States PCate

    would be great, if you could verify your proposed fix

    Loading the library via a CKEditor5 yaml config file does appear to work. It doesn't solve the figure and display: table issue however.

Production build 0.69.0 2024