[5.x]: CKEditor Images Broken After Using "Edit Image" Tooltip

[karlyhoffman]

Description

After editing an inline image within a CKEditor field using the "Edit Image" tooltip menu, the updated image is replaced with a broken URL.

The edits made to the image appear correctly in the "Assets" view of the control panel.

Additional Info:

When viewing the source of the rich text, the difference in the img's src value is the following:

Edited (broken url): #asset:[id] with an additional ?

https://[url]/general/General/foo-bar.png?w=246&h=244&auto=compress%2Cformat%2Cavif&fit=crop&dm=1758574172&s=0fe9d1a4bfdd9cb82fdb9c821f1aadde?1758584327222#asset:219434

Original:#asset:[id]:url

https://[url]/general/General/foo-bar.png?w=244&h=246&auto=compress%2Cformat%2Cavif&fit=crop&dm=1758584326&s=47732743f276bbc329ff6a9d23131d6c#asset:219434:url

Steps to reproduce

1. Click on an inline image within a CKEditor field to view the "Edit Image" tooltip menu.
2. After editing the image, the previous image is replaced by a broken URL.

Before Edits

After Edits

Edits Appear in Assets CP View

Additional info

• Craft version: 5.8.17
• PHP version: 8.2.28
• Database driver & version: MySQL 28.1
• Image driver & version: Imagick 3.7.0 (ImageMagick 7.1.1-41)
• Plugins & versions:
  • CKEditor: 4.10.1
  • Color Mixer: 4.0.1
  • Feed Me: 6.10.1
  • Formie: 3.1.4
  • Hyper: 2.2.9
  • Imager X: 5.1.6
  • Redirects: 5.0.12
  • SEO: 5.1.17
  • Servd Assets and Helpers: 4.1.3
  • Sherlock: 5.2.0
  • Typogrify: 5.0.1

[linear]

PT-2917 [5.x]: CKEditor Images Broken After Using "Edit Image" Tooltip

[karlyhoffman]

I updated the description to include the "Additional Info" section. Let me know if there's anything else I can provide to make this easier for you!

[i-just]

Hi, thanks for getting in touch!

I’m not quite able to reproduce this using local and S3 volumes, but I suspect this could be linked to the Servd Assets and Helpers plugin.
I can see the behaviour you do, where there are two question marks in the URL of the image after it was edited and saved, but the edited image still shows up correctly in my CKEditor.

This issue brings to mind another one, which was only affecting the front-end: #336.

@mattgrayisok, any chance you know what might be going on here? I tried adding custom query params to the image URL, like I did when debugging #336, but that still doesn’t show a broken image after it was edited.

[i-just]

@karlyhoffman, it looks like this could be related to the newly raised #595. I still can’t reproduce the fact that the image loads as broken in the CKEditor field, but I believe the fix should work here, too. If you have time to test, you can change your composer.json requirement to

"craftcms/ckeditor": "5.x-dev#b906677332c9113903b26f35333fb862149f3d26 as 5.6.1"

and run composer update

[brandonkelly]

CKEditor 5.7.0 is out with the fix from #598.