CKEditor 5 Media Embed alignment options does not work

Created on 9 March 2023, almost 2 years 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

source code of the saved image

<?php

?>

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

9.5

Component
CKEditor 5 

Last updated about 3 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

  • Issue created by @mario.elias
  • Status changed to Postponed: needs info almost 2 years 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 about 1 year 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 Washington state

    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.

  • 🇺🇸United States vlyalko

    ksenzee, thank you. Your solution #10 worked. This was the issue in my case. Thank you

  • I met this issue too with Drupal 10+ which seems related to the media rendering with the default theme. Several div are wrapping the "img", it takes all the width available so the parent "figure" having the class "align-center" can not works with "margin: 0 auto".

    @kenchilada workaround (#12) works fine. In my case I prefer use "width: fit-content" to avoid change the texts position inside.

  • 🇬🇧United Kingdom mibstar

    I'm having the same issue in Drupal 10.3.6 with CKEditor 5 with the following media.html.twig:

    <article{{ attributes.addClass(classes) }}>
      {{ title_suffix.contextual_links }}
      {% if content %}
        {{ content }}
      {% endif %}
    </article>
  • 🇳🇬Nigeria chike Nigeria

    The workaround at #12 is working for me on Drupal 10.3.5.

  • 🇧🇷Brazil barone Belo Horizonte

    Had the same issue here: Align preview during editing works fine but after saved, the align is not applied as expected.
    - Drupal 10.3.9
    - CKEditor 5 - latest

    NOTE that, IF I add a caption to the Image, it renders an extra HTML tag from

    <!-- BEGIN OUTPUT from 'core/themes/stable9/templates/content-edit/filter-caption.html.twig' -->

    and then looks as expeted.
    Anyways, I didn't had time to dig deeper but the issue still exists and solution from #10 💬 CKEditor 5 Media Embed alignment options does not work Closed: cannot reproduce worked for me! Thanks ksenzee!

Production build 0.71.5 2024