In the edit mode formatting of the images not rendered correctly

When using ImageResize plugin (added via custom module), resizing image, aligning left or right with text wrapped, it would render correctly in front end, but when going back to make more edits, the render of the content with images is completely messed in the edit box up and looks like all the formatting of the images placements and image sizes are lost. If not making any changes and even saving the page looking messed up, images and content it still renders properly in the front end.

Steps to reproduce

1. Add any content with wysiwyg field
2. Add some text and image
3. Resize image using 4 handles, align right or left with text wrapped or align image to be in the middle.
4. Save content and preview.
5. Content looks good
6. Go back to make more edits and notice that images dont look right and text no longer wrapped around the image.
7. Note: in the front end images size and formatting still look good.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork ckeditor5-3247974

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

vlyalko created an issue. See original summary.

vlyalko’s picture

Issue summary: View changes
vlyalko’s picture

wim leers’s picture

Status: Active » Postponed (maintainer needs more info)
Related issues: +#3224652: [drupalImage] Add ckeditor5-image's imageresize plugin to allow image resizing

First: work is happening in #3224652: [drupalImage] Add ckeditor5-image's imageresize plugin to allow image resizing to support this by default :)

Second: you created your own CKEditor 5 plugin! Exciting! 😄 Can you share your plugin definition? 🙏 In fact … can you post your code as a merge request over at #3224652: [drupalImage] Add ckeditor5-image's imageresize plugin to allow image resizing? 😄

Third: 7. Note: in the front end images size and formatting still look good. sounds encouraging, which is why I wonder if there are any JS erors when you do 6. Go back to make more edits and notice that images dont look right and text no longer wrapped around the image.
?

vlyalko’s picture

StatusFileSize
new142.74 KB
new90.26 KB

Hi Wim, this would be so great if image resize feature was included by default. Thank you for an amazing work you do.

This is the screenshot of the js error i see when i inspect editor.
js error in backend

I will include my code here for now, while figuring out how to add my code as a merge request to the issue you posted above.

ckeditor5_img_resize.ckeditor5.yml

ckeditor5_img_resize_imageResize:
  ckeditor5:
    plugins:
      - image.ImageResize
  drupal:
    label: Image
    library: ckeditor5/drupal.ckeditor5.image
    elements:
      - <img src alt data-entity-uuid data-entity-type height width>
    conditions:
      toolbarItem: uploadImage
      imageUploadStatus: true

ckeditor5_img_resize.libraries.yml

ckeditor5_img_resize:
  remote: https://github.com/ckeditor/ckeditor5
  version: "31.0.0"
  license:
    name: GNU-GPL-2.0-or-later
    url: https://github.com/ckeditor/ckeditor5/blob/master/LICENSE.md
    gpl-compatible: true
  js:
    js/build/image.js: { preprocess: false, minified: true }
  dependencies:
    - ckeditor5/ckeditor5
    - # Loaded in the text format configuration form to provide styling for the icon
# used in toolbar config.
admin.ckeditor5_img_resize:
  css:
    theme:
      css/ckeditor5_img_resize.admin.css: { }

Image resize Plugin custom module structure

vlyalko’s picture

Wim, I have added a custom module to add image resize plugin. I can add a zip file with the module here.

Also, Image resize feature also working if i edit this file web/modules/contrib/ckeditor5/ckeditor5.ckeditor5.yml by adding
image.ImageResize to the plugins section. Please see screenshot attached. I can make that change and create a merge request for this change. Please see line #368

Add Image Resize plugin to the ckeditor5 module ckeditor5.yml file

vlyalko’s picture

StatusFileSize
new105.93 KB

I uninstalled all the other ckeditor5 custom plugins I have created and only enabled ckeditor5 image.ImageResize.

There is a new js error
js error when only ImageResize plugin installed

vlyalko’s picture

Updates:
I had those js errors, because i had named my plugin module incorrectly. I guess there was a conflict the way plugin was named and plugin's libraries. I have updated those and js errors are gone. Console is clear.

Image resize is still working the way i described in this issue.

vlyalko’s picture

Wim, I have added merge request here https://www.drupal.org/project/ckeditor5/issues/3224652
Please let me know if I did what you asked me.
In my local I have created custom plugin modules to make ImageResize work.
In merge request I have updated contrib ckeditor5 module ckeditor5.yml file to add a new plugins

vlyalko’s picture

StatusFileSize
new158.31 KB

When image is resized, style width of the figure element has style="width:##%px" if inspect element and remove px, image size is showing correctly in the ckeditor backend
image resize issue

vlyalko’s picture

I figured for the imageResize to work in the backend (edit mode), "optional" config.image.resizeUnit needs to be set to 'px'
if set to '%', which suppose to be a default, it still not working in the backend.

I tried to still set config.image.resizeUnit to '%', in backend it still not working correctly, it is adding %px to the percent number for the style width attribute.

It is working with config.image.resizeUnit set to 'px', which is a good news
Only local images are allowed.

wim leers’s picture

Project: CKEditor 5 » Drupal core
Version: 1.0.x-dev » 9.3.x-dev
Component: Code » ckeditor5.module
Related issues: +#3249592: [drupalImage] <img width> upcast assumes HTML5: px unit, but HTML4 allowed % unit

The screenshot in #11 is not working. But I think you're referring to #3249592: [drupalImage] <img width> upcast assumes HTML5: px unit, but HTML4 allowed % unit, which you opened for that specific problem. Bumped that up to critical.

Thank you for opening that merge request, looking at that now! 😊

wim leers’s picture

Title: Image resize, Image with text wrapped shown correctly on front end and not correctly shown in backend » [drupalImage] Image resize, Image with text wrapped shown correctly on front end and not correctly shown in backend

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

wim leers’s picture

Status: Postponed (maintainer needs more info) » Closed (outdated)
  1. The critical bug in #3249592: [drupalImage] <img width> upcast assumes HTML5: px unit, but HTML4 allowed % unit was fixed a very long time ago.
  2. #3224652: [drupalImage] Add ckeditor5-image's imageresize plugin to allow image resizing added the ImageResize plugin a week ago.

I believe there's nothing else left to be addressed here! 🥳

@vlyalko, you can/should stop using your custom module to add ImageResize now! 😊