- Issue created by @smustgrave
- 🇺🇸United States bernardm28 Tennessee
I can confirm this is an issue.
https://ddev.readthedocs.io/en/latest/users/quickstart/#__tabbed_4_2
I used the ddev quick start and then created a new basic page on Olivero's standard profile.
- 🇺🇸United States bernardm28 Tennessee
Seems like the issue comes from
without the issue
<figure class="image ck-widget image_resized ck-widget_with-resizer ck-widget_selected" style="height:1512px;width:2824px;" contenteditable="false"
removing style="height:1512px;width:2824px;" fixes the issue.
- 🇺🇸United States bernardm28 Tennessee
Same page without the issue.
removing
style="height:1512px;width:2824px;"
from<figure class="image ck-widget image_resized ck-widget_with-resizer ck-widget_selected" style="height:1512px;width:2824px;" contenteditable="false"
- 🇺🇸United States bernardm28 Tennessee
Also, I just noticed that clicking the original format as seen in the image below fixes it.
However, that setting does not get saved so upon opening the node the layout changes and it pics a different resolution.
So the image ckeditor plugin might be the buggy party here. I think I have found something.
https://git.drupalcode.org/project/drupal/-/blob/4692fca5bcd33728bff24a5...
⚠️ Everything below this point is copy/pasted directly from https://github.com/ckeditor/ckeditor5/pull/15222, to continue to use the `width` and `height` attributes to indicate resized width and height. This is necessary since CKEditor 5 v40.0.0.
CKEditor5 uses
image_resized
attribute to track whether the image was resized or not. Drupal does it differently - it uses onlywidth
andheight
attributes of the img tag.The problem here is that both
width
andheight
attributes are set immediately after an image is uploaded. Once the editor is reloaded, Drupal makes CKEditor think that the image was manually resized.Looks like a bug in
drupalimageediting.js
- 🇧🇷Brazil aluzzardi Pelotas, RS
That issue is not only happening with images while adding via editor.
We found the same issue if you add a very long URL and click to see the Source Code.
I uploaded a video with the issue.
My quick fix for it was to add a custom css for the .ck.ck-editor via theme:theme.info.yml ckeditor5-stylesheets: - css/admin/ckeditor-fixes.css
.ck.ck-editor { max-width: 960px; }
It's not the best I belive but should help others for now.