Ticket #8424 (closed Bug: fixed)

Opened 3 years ago

Last modified 14 months ago

ContentEditable, Image and Chrome

Reported by: kok Owned by:
Priority: Normal Milestone:
Component: General Version: 3.0
Keywords: Cc: koknico@…

Description (last modified by j.swiderski) (diff)

Support of contentEditable with Chrome (current v14) behaves in a weird way.

For example, copy/paste HTML in the source mode on the demo page :

<p><span contenteditable="false"><img contenteditable="true" src="http://a.cksource.com/c/1/inc/gfx/logo.png" /> </span></p>

which is like a structure we need for our website.

With Chrome, you can't write anything before or after the image even though <p> is editable (By the way, with Firefox you can't write before either but you can after).

But the main issue is that when you try to remove the image with backspace :

  • the first hit moves the cursor before the image
  • the second hit duplicates the image !!!

Another problem is that you can't edit the properties of the image with right-click. You can with double-click but all the properties are empty, especially the URL and then you have an alert when validating on OK.

Change History

comment:1 Changed 3 years ago by kok

  • Cc koknico@… added

comment:2 Changed 3 years ago by j.swiderski

  • Status changed from new to confirmed
  • Keywords Chrome removed
  • Version changed from 3.6.1 to 3.0
  • Component changed from UI : Enter Key to General
  • Description modified (diff)

With Chrome, you can't write anything before or after the image even though <p> is editable >(By the way, with Firefox you can't write before either but you can after).

Please look at elements path. It clearly shows that you are inside non-editable span and not in editable p. If you place curosr behing image and press left arrow you should be able to get out of span and type. This part of bug is invalid.

You can always place editable spans around non-editable one if you want to play with contentEditable attribute.


But the main issue is that when you try to remove the image with backspace :

  • the first hit moves the cursor before the image
  • the second hit duplicates the image !!!

Another problem is that you can't edit the properties of the image with right-click. You >can with double-click but all the properties are empty, especially the URL and then you >have an alert when validating on OK.

Issue with duplicated image has been reproducible in Webkit from CKEditor 3.0

Issue with empty menu on double-click has been reproducible in Webkit from CKEditor 3.4 and in all IE browsers from CKEditor 3.3

Additionally IE6 and IE7 throw JS error on double-click:
Message: null is null or not an object
Line: 294
URI: ckeditor/_source/plugins/image/dialogs/image.js

comment:3 Changed 3 years ago by j.swiderski

Based on this ticket I have also created separate issue #8427 for Opera.

comment:4 Changed 3 years ago by kok

I'm OK with the first part : you can add text after the image by pressing left arrow. But I thought there was some code in CKEditor for placing the cursor where it is editable (but I'm not sure, maybe I'm wrong). In this case, we should be in the editable <p> instead of the <span> which is more user-friendly.

comment:5 Changed 14 months ago by Reinmar

  • Status changed from confirmed to closed
  • Resolution set to fixed

Fixed by Widget System.

Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy