When I insert an image into body field (CKEditor, D8) and later on I have to change something I can not change the image properties: It does not work with right mouse button (image properties) and it does not work with the image icon in CKEditor (of course the image has to be selected before).

Is there any solution for this problem? Thank you.

Comments

drupalfan2 created an issue. See original summary.

Snater’s picture

I tried to reproduce the issue, yet I might misunderstand something.

To gain access to the "image properties" via the right click context menu, CKEditor has to be configured that its image button is in the CKEditor toolbar - which is the default for the "Basic HTML" text format. That works for me. But, as I understand, you have tried that already.

(When the image button is not in the CKEditor toolbar, CKEditor's image2 plugin (more precise the drupalimage plugin which overrides the image2 plugin) is not activated and, consequently, images do not receive a special treatment when rendering the editor body. No "image properties" context menu item on that configuration. So, a prerequsite is having CKEditor configured to have the image button in its toolbar.)

Does the image button work without having an image selected? Is the frame around the image (generated by the image2 plugin) showing up when an image is selected? Does any JavaScript error pop up in the browser console? When you right-click an image, does the context menu show up without the "image properties" or does the menu not show up at all? What does the generated source code of an image look like?

This might also be an issue unrelated to the Insert module. We will have to find that out.

drupalfan2’s picture

hello, thank you for your answer.

I tested now again on a fresh Drupal 8 installation on simplytest.me with the news Insert module:
- Installed and enabled insert module
- configured insert module: enabled for full html textformat
- edited content type "page" and added an image field
- managed form display for the new image field and changed the form element to "Image insert", enabled all existing image styles for this image field

When I create a new page with full html format, I can upload an image and I can insert the image into Body (CKEditor), e.g. with medium image style.

I can save the page and the inserted image appears on the place I inserted it.

Editing the page I can click on the inserted image with the right mouse button: The image property context menu appears and I can click on "image properties".

The popup/overlay appears and the ALT-Text of the image is correct BUT there is no image in the dialog, I can see the "Select image" button to upload an image (again).

The html code of the inserted image contains:
data-entity-uuid="insert-medium-2fdc847b-2d4b-45ec-9915-f7f1026d8605"

Maybe this is the problem:
The image is not recognized because the data-entity-uuid is maybe not correct.
Why?

If I insert an image with the normal image icon of CKEditor the resulting html code contains:
data-entity-uuid="44f93015-bd30-482f-87cf-dac0913fd28e"

This difference causes the problem. The inserted data-entity-uuid begins with "insert-medium-..."

When I manually remove the "insert-medium-" part and the result is
data-entity-uuid="2fdc847b-2d4b-45ec-9915-f7f1026d8605"
then everytihing works fine, I can change the image property with right mouse button and context menu.

Can you repair this so that insered images have no "insert-medium-" ant the beginning of the data-entity-uuid? Then this problem could be solved, I think so.

Snater’s picture

Thanks for your extensive description.

I do not have the time to take a deeper look into the issue before next week. But as I see it, you are correct regarding the effect of the uuid.

However, I doubt these pseudo uuids should be changed: The uuid prefix is intentional because removing the uuid prefix results in the styled images getting replaced by the full-size original images when rendering the content - that is what I experienced (see https://www.drupal.org/node/2872520). As far as I am aware, styled images do not feature an individual uuid, which is quite a drawback regarding placing styled images inline. Since the uuid attribute is required as to core specifications, the consequence was generating such pseudo uuids.

As of now, I do not see a perfect solution for the problem, but I will take a look at it again. Regardless of the undesired effect, in my opinion, it does not make great sense to allow image uploads via the editor image dialogue when using the Insert module. What I did is disabling image uploads in the text format configuration. That results in the image dialogue's upload form field being replaced by a plain image URL text box that always displays the correct path to the (styled) image.

Snater’s picture

The bottom line is: The concept of placing styled image derivatives in the body or some editor just does not seem to have been foreseen or designed in core.

Like written before, styled image derivatives are not assigned uuids to. There may be several reasons for that, I can imagine managing uuids on image style derivatives being very specific and complex. Yet, in my opinion, the proper way to solve the issue would be upstream in core.

There are other ways to work around the problem. For example, the Entity Embed module's solution is to create a custom, non-standard HTML concept custom to the Entity Embed module. In theory, such could be implemented in the Insert module as well; just like it would be an option to have the Insert module depend on the Entity Embed module and attach the Insert button to Entity Embed's functionality. But in both options, once applied some module would be indispensable in the future of a Drupal instance, in contrast to right now where you could just dump the Insert module and nothing would break.

So, these are the options: Either keep the current, minimally invasive set-up or move towards a tighter integration. I would keep sticking with the first as I do not see a critical problem with that, yet I am open for suggestions and opinions. Of course, I may be wrong with any of my assumptions. I am going to leave the issue open for a while but will probably close it as won't fix when it seems to stall.

drupalfan2’s picture

Thank you for your work and your explanation.

Maybe you are interesting in implementing an warning message.
When "Enable image uploads" is enabled in CKE Editor settings for the used text formats, then the context menu "Image properties" for the inserted images is not working correctly and nobody know why it does not work correctly.

A warn message could tell the user/admin to disable image uploads for CKEditor - at least he can decide. Without any hint or without any warn message nobody knows why it does not work like here in core (other problem).

Snater’s picture

A warning message would be nice to have. But it would need to show up in the image dialogue and, hence, be CKEditor specific. Apart from the drupalimage CKEditor plugin being very encapsulated, when supporting other editors, the message would probably need to be implemented individually for each editor. Additionally, the warning message should not show up if some user adds a new image entering some custom or external path in the dialogue. I think, for now, it is sufficient to mention the issue in the documentation as long as it does not pop repeatedly.

My intention is to tag the beta version within the next couple of days and update the documentation then.

Snater’s picture

Component: Code » Documentation
Status: Active » Fixed

Setting to fixed for now. Issue is documented in the module documentation. Might get some highlighting or some other solution if the problem reoccurs.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.