CKEditor 5 Media Embed alignment options does not work

Created on 9 March 2023, 12 months ago
Updated 20 February 2024, 11 days ago

Problem/Motivation

Issue alignment image using Drupal version: 9.5.4 and CKEditor 5.

When using CKEditor 5 Media Embed to add Media Library images

Steps to reproduce

1. Using Drupal version: 9.5.4 - install and enable CKEditor 5 , Media Embed Plugin.
2. go to: /admin/config/content/formats to config CKEditor 5.
3. go to: /admin/config/content/formats/manage/basic_html?destination=/admin/config/content/formats and Select Basic HTML.
4. Configure the CKEditor WYSIWYG editor to use the CKEditor 5 media embed plugin. See Embedding media with CKEditor documentation .
5. Embed media, click the "Media" button in the CKEditor toolbar. This will open the media library, where you can select the media file you want to embed. **** IMPORTANT: Do NOT add caption for this test. *****
Once you have selected the file, it will be embedded in your content.
6. Select and Save "align right and wrap text".

note: The image look correct on the editing mode however it does not align as expected after save. See images attached

image show correct using editing mode

After save the image does not display align right and wrap text

source code of the saved image

Thank you Mario

<?php

?>

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

💬 Support request
Status

Closed: cannot reproduce

Version

9.5

Component
CKEditor 5 

Last updated about 2 hours ago

Created by

🇺🇸United States mario.elias

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

Comments & Activities

Not all content is available!

It's likely this issue predates : some issue and comment data are missing.

  • Issue created by @mario.elias
  • Status changed to Postponed: needs info 12 months ago
  • 🇳🇿New Zealand DanielVeza Brisbane, AU

    I have not been able to replicate this with a default Drupal 10.x install.

    I can see in your example markup there looks to be some custom stuff coming through, Blazy classes and is-b-loaded. Could this potentially be in an issue in the theme/site you're using?

    Could you please try replicate this on a vanilla Drupal 9/10 install and let us know if the issue still persists?

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    Note: https://www.drupal.org/docs/core-modules-and-themes/core-modules/media-l... is for CKEditor 4, not 5. Just clarified that at the top of the page.

    note: The image look correct on the editing mode

    Great!

    however it does not align as expected after save. See images attached

    Damn!

    Could you share:

    1. the embedded media markup stored in the DB/what you see in the "Source" view of CKEditor 5
    2. already present 👍
    3. which theme you are using?

    (I share @DanielVeza's suspicion.)

  • Status changed to Closed: cannot reproduce 5 months ago
  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺
  • 🇮🇳India neetu morwani

    This is reproducible on D10 as well with Ckeditor5 - enabled Claro theme to validate if it is not custom theme related.
    media alignment and text wrapping around it does not work

  • 🇺🇸United States ksenzee Seattle area

    Folks experiencing this issue should double-check that the media template in use (media.html.twig, or media--image.html.twig, or whatever) is properly outputting its attributes. If you have a media.html.twig that removes the wrapper div core provides, that will cause this issue. It needs to have

    <div{{ attributes }}>
      {{ content }}
    </div>
    

    as opposed to just

    {{ content }}

  • This is reproducible in Drupal 10.1.8, CKEditor 5.
    #10 didn't help in my case.
    Is there any other recommendation/solution for this issue, please?

  • We hit this same problem. I have a wrapper div with "align-center" but the styles applied do not center the image. The "margin:0 auto" does not work for my site. I cannot figure out why. There is no class applied on the image itself.

    I was able to workaround it by adding "text-align:center" to the "align-center" class.

  • 🇺🇸United States emb03

    I am having this issue too drupal 10.2 vanilla install ckeditor5 media embed remote video, centering works in editor but not on front end. A regular image works as expected.

Production build https://api.contrib.social 0.61.6-2-g546bc20