Steps to reproduce:

1. Go to any content add page with textarea field with ckeditor enabled(even for full html format as admin)
2. Click on image add plugin button from toolbar.
3. Insert some image url there and hit save.
4. Now if you double click on image, the edit modal opens with previously inserted details.
5. Now click on view source and then click on it again to normal wsiwyg mode.
6. double click on the image inserted and now the image edit modal no longer opens.

Cause of Issue:

From what i can debug, the issue is related to ckeditor plugin wrappers around the image getting removed once the view source has been clicked. coming back to wsiwyg mode doesn't add the wrappers back around the image and the ckeditor events to open edit image modal are binded to that wrapper.

Html around the image inserted before Clicking view source and image modal opens up on double click:

<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders"
spellcheck="true" style="height: auto; min-height: auto;" contenteditable="true">
  <p><span tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off" class=
  "cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption"
  data-cke-display-name="Bild" data-cke-widget-id="0" role="region" aria-label=
  "Bild Steuerelement" contenteditable="false"><img alt="" src=
  "http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/04/1428068708logo_drupal.png"
  data-cke-widget-keep-attr="0" data-widget="image" class="cke_widget_element"
  data-cke-widget-data=
  "%7B%22hasCaption%22%3Afalse%2C%22src%22%3A%22http%3A%2F%2Fdab1nmslvvntp.cloudfront.net%2Fwp-content%2Fuploads%2F2015%2F04%2F1428068708logo_drupal.png%22%2C%22alt%22%3A%22%22%2C%22width%22%3A%2250%22%2C%22height%22%3A%2250%22%2C%22lock%22%3Atrue%2C%22align%22%3A%22none%22%2C%22classes%22%3Anull%7D"
  data-cke-saved-src=
  "http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/04/1428068708logo_drupal.png"
  width="50" height="50" /><span class="cke_reset cke_widget_drag_handler_container"
  style=
  "background: rgba(220, 220, 220, 0.5) url(&quot;http://hzd.d8/core/assets/vendor/ckeditor/plugins/widget/images/handle.png&quot;) repeat scroll 0% 0%; top: -15px; left: 0px; display: block;"><img class="cke_reset cke_widget_drag_handler"
  data-cke-widget-drag-handler="1" src=
  "data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="
  title="Zum Verschieben anw&#228;hlen und ziehen" role="presentation" draggable="true"
  width="15" height="15" /></span><span class="cke_image_resizer" title=
  "Zum Vergr&#246;&#223;ern ausw&#228;hlen und ziehen">&#8203;</span></span><br /></p>
</body>

After clicking view source , the html around the image:

<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders"
spellcheck="true" style="height: auto; min-height: auto;" contenteditable="true">
  <p><img alt="" data-entity-type="" data-entity-uuid="" data-cke-saved-src=
  "http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/04/1428068708logo_drupal.png"
  src=
  "http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/04/1428068708logo_drupal.png"
  width="50" height="50" /></p>
</body>

Comments

sumanthkumarc created an issue. See original summary.

sumanthkumarc’s picture

sumanthkumarc commented
Issue summary: View changes
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Category: Bug report » Support request
Status: Active » Postponed (maintainer needs more info)

I can't reproduce this:

  1. Now if you double click on image, the edit modal opens with previously inserted details.
  2. Now click on view source and then click on it again to normal wsiwyg mode.
  3. double click on the image inserted and now the image edit modal no longer opens.

The image modal dialog continues to appear just fine for me.

Can you record a screencast, to ensure I'm not misunderstanding the problem?

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: Ckeditor DrupalImage plugin, edit image modal dialog doesn't open once view source has been clicked » CKEditor DrupalImage plugin, edit image modal dialog doesn't open once view source has been clicked
sumanthkumarc’s picture

sumanthkumarc commented

@wimleers, yes will do.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

Thanks!

sumanthkumarc’s picture

sumanthkumarc commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)

Looks like there is something on our site, which breaks this or using old version. worked fine on latest vanilla. Closing this issue.

kevinhbruce’s picture

kevinhbruce commented

This exact thing is happening to my site. After placing an image, I can resize, add caption, and double-click to reopen the image dialog, but when I go into source view and come back out, it acts like the editor doesn't see it as an actionable image anymore. I can't resize, I can't doubleclick to reopen the image dialog.

This same issue happens when editing an existing page—none of the images are actionable, because the image resizer doesn't appear (knowing this is a separate module) and I can't reopen the image dialog by double-clicking on the image.

I'm running Drupal 8.8.5

rjw’s picture

rjw commented
Category: Support request » Bug report
Status: Closed (cannot reproduce) » Active

I ran into this issue, as described in the original post, on a new Drupal 9 site. That site is using IMCE, but the problem can be reproduced on a new vanilla Drupal 9.2.1 site with the standard install profile. Using simplytest.me:

  1. Create new site, no additional modules, and log in
  2. Configuration > Content authoring > Text formats and editors > Full HTML > Configure
  3. Image plugin settings: Disable image uploads
  4. Filters: Enable Align images, disable all others
  5. Save configuration
  6. Content > Add content > Basic page
  7. Change text format of Body to Full HTML
  8. Click Image button to insert image: URL: /core/themes/bartik/logo.svg (or any image), Alt text: test, Align: none
  9. Save
  10. Double-click image, or right click and select Image Properties: Edit Image modal appears - close it
  11. View source and unview source
  12. Double-click and right click no longer provide access to Edit Image modal

You don't even have to view/unview source. If you insert the image, save the page, then edit again, same problem.

The inserted image tag looks like this:

<img alt="test" data-entity-type="" data-entity-uuid="" src="/core/themes/bartik/logo.svg" />

If you put something into the empty attributes, though, Image Properties works again:

<img alt="test" data-entity-type="y" data-entity-uuid="z" src="/core/themes/bartik/logo.svg" />

It seems like Image Properties works on any image with non-empty data-entity-type and data-entity-uuid attributes. If they're empty or missing, then no dice. (My site with IMCE was producing img tags with empty data-entity attributes.)

Here's another interesting clue. If you go back to the Full HTML text format and disable Align Images, then Image Properties works again, even with empty data-entity attributes.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue tags: +Needs tests

Version: 8.5.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

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

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

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

quietone’s picture

quietone commented
Project: Drupal core » CKEditor 4 - WYSIWYG HTML editor
Version: 9.4.x-dev » 1.0.x-dev
Component: ckeditor.module » Code

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