Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 295131

CKEditor DrupalImage plugin, edit image modal dialog doesn't open once view source has been clicked

$
0
0

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>

Viewing all articles
Browse latest Browse all 295131

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>