ContentEditable, Image and Chrome

[kok]

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.

[Jakub Ś]

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

[Jakub Ś]

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

[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.

[Piotrek Koszuliński]

Fixed by Widget System.