drupalimage CKEditor plugin should not require data-entity-uuid and data-entity-type when image upload is disabled

I was able to reproduce it. This is a nice catch because not only you can't edit the image, but it stops being a widget too.

It seems like this will block #2510394: [drupalImage] Setting to still allow linking to an image by URL even when uploads are enabled.

Nice find!

As a quick workaround, I've changed these two lines in /core/modules/ckeditor/js/plugins/drupalimage/plugin.js to ensure the required attributes are set:

Old:

        // Override downcast(): since we only accept <img> in our upcast method,
        // the element is already correct. We only need to update the element's
        // data-entity-uuid attribute.
        widgetDefinition.downcast = function (element) {
          element.attributes['data-entity-type'] = this.data['data-entity-type'];
          element.attributes['data-entity-uuid'] = this.data['data-entity-uuid'];
        };

New:

        // Override downcast(): since we only accept <img> in our upcast method,
        // the element is already correct. We only need to update the element's
        // data-entity-uuid attribute.
        widgetDefinition.downcast = function (element) {
          element.attributes['data-entity-type'] = this.data['data-entity-type'] ? this.data['data-entity-type'] : '<none>';
          element.attributes['data-entity-uuid'] = this.data['data-entity-uuid'] ? this.data['data-entity-uuid'] : 0;
        };

This is a blocker for #2510394: [drupalImage] Setting to still allow linking to an image by URL even when uploads are enabled.

The workarround in #5 is working well when adding new images.

However, if people with existing images update Drupal with this fix, they still won't be able to edit their images without removing and adding them again. Also, it doesn't work for images added by any other module or ckeditor plugin which does not set the attributes (IMCE for instance).

Should we just make the data-entity attributes optional ?
I am not sure if this would have other impacts but in case of a url, there is no entity, so there is no reason to have the data-entity attribute.
When #2510394: [drupalImage] Setting to still allow linking to an image by URL even when uploads are enabled will be fixed, the dialog would seamlessly display url or file configuration depending on the presence of the attributes.

This patch is an attemp : it removes the requirements on the image widget definition and remove the verification on the parent imageCaption plugin (which is call first when processing an image).

Thanks for the patch. Using IMCE for inline images the missing image widget was really annoying.

Thanks for #8 - must have for old sites migrated from Drupal 6 or similar with huge amount of plain "img" tags.

#8 fails on Drupal 8.4. Can anyone please update patch?

For Drupal 8.4 I took #5 and modified it oh so slightly:

/core/modules/ckeditor/js/plugins/drupalimage/plugin.js

In core:

widgetDefinition.downcast = function (element) {
  element.attributes['data-entity-type'] = this.data['data-entity-type'];
  element.attributes['data-entity-uuid'] = this.data['data-entity-uuid'];
};

Change to:

widgetDefinition.downcast = function (element) {
  element.attributes['data-entity-type'] = this.data['data-entity-type'] ? this.data['data-entity-type'] : 'image';
  element.attributes['data-entity-uuid'] = this.data['data-entity-uuid'] ? this.data['data-entity-uuid'] : 0;
};

Difference from #5 is data-entity-type is set to 'image' instead of 'none'. With this, image uploads through IMCE/URL retain their widget upon editing. Haven't found any side effects so far.

+1 #8

-1 #15

Update of #8 for Core 8.4

#17 allowed me to access the image properties widget on an imce inserted image on 8.4.

Agreed with #18 that #17 allowed me to access the image properties widget for an IMCE inserted image on 8.4... However the 'Image' field is required and isn't auto filled which defeats the purpose of this functionality. At the moment you have to physically upload a new image to be able to save the modal details; whereas we probably want the 'Image' field to be auto filled with the image chosen from the IMCE dialog (the same way it works when you upload an image and then edit it the normal way).

Anyone got this working on 8.5?

#17 works for me on 8.5

Hmm, #20 is concerning. Anyone else confirm that? @hilatti, are you not experiencing #20?

I have not been able to get it working on 8.5 -- seems the patch causes the page load to go a bit wonky. The footer for the editor loads but I am unable to load the rest of the editor after applying patch.

thanks for the info @Shane Birley. Hopefully we'll get a working patch soon, as this is kind of a crucial bug that must be driving content editors crazy.

I came across this on 8.5, and tried #17, but no changes, the same behavior as before was observed.

Adding the code in #15 by @silver_nmy did work though, and I'll leave that in, for the moment.

@karolus, have you tried this?

https://www.drupal.org/files/issues/2822217-drupalimagecaption-img-src-f...

https://www.drupal.org/node/2822217

Tried this morning and works for me to bring back image propertied/captions.

Based on my previous comment on #26, I created a patch. Credit to @silver_nmy

https://www.drupal.org/files/issues/2018-05-08/drupalimage_ckeditor-2771...

@rferguson Thanks--I only saw your post after I went through to make a patch posted as #28. Will see how it goes.

I have the same problem as mentioned in #20.

I applied patch from #17 and #28 on Drupal 8.5.4 where users can either upload images using the built in image upload OR Imce File Explorer 8.x-1.6.

I can now successfuly resize images uploaded with imce file explorer. I can also show the image properties but when trying to save the properties I get an error message, saying that an image file is required.

#17 & #28 worked perfectly for me. Nice work!

I hope this can make it into the next core release as its an important update to fix an annoying bug.

From a novice content editor point of view that might be using D8, it diminishes the editors usability and therefore their fondness for using Drupal as a CMS, something I think a lot of developers tend to forget.

re-rolled for 8.6

something added the newline automatically, heres a patch without the newline change if you want

I can confirm, the patch from #34 works with drupal/core 8.6.x-dev.

It fixes the main problem, that images inserted via URL instead of the image upload widget, can't be resized. After applying the patch, this works well, but still there are problems with images inserted through other means.

As mentioned above, if you install drupal/imce and add the imce image button to the wysiwyg editor's menu, images inserted through the imce widget can not be resized. I guess other image modules are having the same problem, but I didn't try.

Also, if you edit the page source manually and add an img tag there, it would be nice, if it was scaleable after switching back to the wysiwyg editor.

Workaround

If you can't resize an image, added manually or with any other contrib module's widget, just add data-entity-type="image" data-entity-uuid="0" to the img tag's attributes in the page source.

Even tho the imce image upload button's behavior is not fixed with this patch, you can open the imce browser from within the core image widget to get the desired result. Just remove the imce image upload button from the menu and uncheck Enable image uploads.
To insert image from the wysiwyg editor click the default image button and click Open file browser right above the file path field.

We're also using the patch in #34 successfully.

Patch in #34 worked and I am still able to resize the images.

Marking as reviewed based on more than one report.

Thanks for filing this bug report and for fixing it. Bug fixing is very valuable. However in order to commit a bug fix we need an automated to test to prove that we've fixed the bug and ensure that we don't break it again in the future. For more information about writing tests in Drupal 8 see the following links:

1. https://www.drupal.org/docs/8/testing
2. https://api.drupal.org/api/drupal/core%21core.api.php/group/testing/8.7.x

In this case we need to add a javascript test because that's what needs testing. Perhaps we can extend the existing test coverage in \Drupal\Tests\ckeditor\FunctionalJavascript\CKEditorIntegrationTest to test this.

need a combo of #8 and #34. with 8.7.x, number 34 is no longer enough.

Am I the only one who is seeing the same problem, but when I AM adding the image to the page via the Image button? I am using the standard image button, opening the file browser, selecting the image, adding alt text, then saving. When it's saved, it's creating this HTML:

<img alt="test image" data-entity-type="" data-entity-uuid="" src="/sites/default/files/test_image.jpg">

reference: https://www.drupal.org/node/2381651

?

I am seeing the same problem as in #41.

thanks for confirming @lebachai. The result here for me is that I am completely unable to update image configurations across the board on my Drupal 8.7.8 installation. Its outrageously annoying for our content creators/editors.

This really is actually quite insane... is there truly no way at all in Drupal 8 to edit a image's properties after saving a page initially, or am I missing something? I can't seem to find any way to do so. This issue is so basic and bad that it is, in and of itself, a reason to not use Drupal.

Embarrassing, really.

5 years and people still can't edit image properties. In a CMS. I hope someone is warm and happy in their test-driven world.

I'm on 8.8.1, and #34 still works for me (via manual editing). However, migrated (existing) images are left out in the cold.

"I hope someone is warm and happy in their test-driven world."

hahahaha

@codeelegance, do you think #34 should be merged, or is it only a partial fix? I couldn't quite tell from your comment. Thanks for the feedback.

I initially thought this was good to go, but I didn't apply the patches, I just manually edited the files.

Applying #8 and #34 doesn't seem to work.

More research....

oooooook then lol, thanks for contributing

After more research:
I've discovered some things. The reason the patch doesn't work for 8.8 and above is because of the initiative to use es6 Javascript.

The modifications in #8 and #34 need to be made in plugin.es6.js in both the drupalimage, and the drupalimagecaption directories. From what I can see, you don't need to modify plugin.js, but YMMV.

I've created a patch that modifies both versions of the files,.

thanks!!

Using the patch #50 and drupal 8.7 I get errors like

The "image" entity type does not exist.

Looking around I found a Change record Inserted images now use data-entity-type="file" + data-entity-uuid="" instead of data-editor-file-uuid="" (#2381651) with an example of a correct image:

<img alt="Hipster llama!" data-entity-type="file" data-entity-uuid="0ee3c362-3d4e-447a-a41e-30a70d679815" src="/sites/default/files/field/image/hipster llama.jpg" />

Changing "image" to "file" in #50 works for me.

Patch coming.

Here is a modified version of #50 in which I changed 'image' to 'file' in modules/ckeditor/js/plugins/drupalimage/plugin.js

This worked for me with drupal 8.7.

Failure on Drupal 8.9.3. The resize and captions work, can save and edit/resize. When adding a link to the image, the entire ckeditor fails.

Tested #56:
Works as expected, except where image has a link on it, such as: <a href="/sites/default/files/my.pdf"><img alt="my image" src="/sites/default/files/myimage.jpg"></a>
This occurs using IMCE file manager and have not tested otherwise.

Thank you for all the hard work on this so far!

The #56 does the job on Drupal 8.9.6.
It also can be used when images was loaded using the 'IMCE' module (in this case it was impossible to alter align of an uploaded image by clicking on it after saving).

deleted of duplicate

Re-rolled For Drupal 9.1.x

+1 for #56 (with IMCE & 8.9.7) - we should get this added to core ASAP for 8.x

Running Drupal 8.9.13 #56 mostly works, except when an image gets Centered the UUID gets zeroed out. I don't yet understand why it gets displaced in the first place. Any ideas?

Rerolled the patch in #66, thanks!

re-rolled patch #67. Attached interdiff for same.

re-rolled patch #68.

For Drupal 9.1.x above patches #66, #67, #68, #69 are getting failed.

Updating the patch to compatible with Drupal 9.1.x.

Rerolled #72 against 9.3.x and fixed CS issues

Rerolled patch #65 against 8.9.x
Regenerated plugin.js files based on their *.es6.js source files for #73 as well

Thanks for #74, works fine for 9.2.4. With #2510394-55: [drupalImage] Setting to still allow linking to an image by URL even when uploads are enabled is a must have for sites with migrated content.
BTW, #2822217-29: DrupalImageCaption plugin does not recognize <img src>, with a manually specified src has some tests suitable for this issue.

Fixed the fail test, Please have a look.

Test added, Not too sure it is up to the mark. Please have a look and advise.

Drupal 9.3.3 broke the last patch. I made a patch of the fix. I tested it with the base files for 9.3.3 and it worked for me. Can someone else test it, please?

Sorry—here is the patch that worked for me:

It's unfortunate we never got around to fixing this in CKEditor 4, but … we definitely did not repeat this mistake in CKEditor 5!

#3222756: Allow using images from external source just landed, and it handles this *correctly*, on day one, with explicit test coverage 😊

Note: The update path for this issue in CKEditor 4 would've been *very hard*, because we lacked the infrastructure to safely update the filter_html settings.

If this has been frustrating you for years … then after upgrading from CKEditor 4 → 5 (in the upcoming 9.5.0/10.0.0), you'll notice that <img data-entity-type data-entity-uuid> appear in the Source Editing plugin's settings, for backwards compatibility reasons (to not break existing content). As the site owner, you know your content best, so if you know it's safe to not support those, you can just delete that. And voila! This nightmare will be over for you! ☺️ At last! 😬

CKEditor has been removed from core, CKEditor 4 is removed from Drupal Core in 10.0.0

Add new patch for ckeditor contribute module.

Patch for someone who's upgrading to 9.5.0 but not planning to update to CKEditor immediately.

2771837-88.patch does not work for 9.5.3 for CkEditor 4

This is the same patch as #88, but created against the module in contrib. It applies on the newest version of Ckeditor 1.0.1.

Looking at the content of the patch I would think it still requires work since it only comments out some things and removes some checks.