Unable to edit an image by double clicking on it

[rishifter]

Description

We can't seem to double-click on an image in the editor and have it open the slide-out where the asset details can be modified.

Steps to reproduce

1. Add an image in a CKEditor field.
2. Double-click the image — Nothing happens. The expectation is that a slide-out should open to edit the image.

Additional info

• Craft version: 4.8.10
• PHP version: 8.0.30
• Database driver & version: MariaDB 10.6.18
• Plugins & versions: 3.8.3

[i-just]

Hi, thanks for getting in touch! That’s currently working as expected. Depending on how you set up the CKEditor Config used by the field, you will see various buttons when you click on the image (e.g. caption, transform options, alt text, alignment), but there’s currently no functionality to let you double-click on it and end edit its Asset element in a slideout.

[rishifter]

Hi, we want to add an option for Image Editor, to allow adding image asset fields and cropping/rotating the image.

On Redactor, we had this option as an example. Our client requested to add this after we switched from Redactor to CKEditor. We are unable to figure out how to add this to CKEditor. Can you help us? Thanks!

[i-just]

Hi @rishifter, We have discussed this internally, and to start with, we’ll work on integrating a link to the “Image editor” into CKEditor (same behaviour as in the Redactor plugin).

[rishifter]

Thanks @i-just! That is helpful.

Is this logged somewhere so we track the progress?

[rishifter]

Hi, any updates on this? Since this was mark as closed, curious if this is being tracked elsewhere.

[i-just]

Hi, no update yet. It is on our to-do list, though.

[brandonkelly]

CKEditor 3.10.0 and 4.3.0 are out with an “Edit Image” button added to image toolbars.

[rishifter]

Thanks for the update!

[akukral]

What is the JSON/Javascript to add this to the CKeditor config options? I have a pretty complicated one and the edit button does not show up with my current Image menu options currently?

[i-just]

@akukral, you need to add "imageEditor" to the image > toolbar configuration (or, if you don’t have any custom configuration for the image toolbar, it will show by default); for example, to show the caption, alt text and image edit buttons, you need:

{
  "image": {
    "toolbar": [
      "toggleImageCaption",
      "imageTextAlternative",
      "imageEditor"
    ]
  }
}