Opened 13 years ago

Closed 11 years ago

#8424 closed Bug (fixed)

ContentEditable, Image and Chrome

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

Description (last modified by Jakub Ś)

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 (5)

comment:1 Changed 13 years ago by kok

Cc: koknico@… added

comment:2 Changed 13 years ago by Jakub Ś

Component: UI : Enter KeyGeneral
Description: modified (diff)
Keywords: Chrome removed
Status: newconfirmed
Version: 3.6.13.0

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 13 years ago by Jakub Ś

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

comment:4 Changed 13 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 11 years ago by Piotrek Koszuliński

Resolution: fixed
Status: confirmedclosed

Fixed by Widget System.

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy