pressing delete key inside empty td[contenteditable="true"]

[Sergiy Kuzmenko]

Steps to reproduce

1. Set CKEDITOR.dtd.$editable.td = 1 to enable editing inside td.
2. Create the following HTML layout:

    <table border="0" cellpadding="0" cellspacing="0" width="600">
        <tbody>
	    <tr>
                <td width="100%" contenteditable="true"></td>
	    <tr>
        </tbody>
    <table>
    <table border="0" cellpadding="0" cellspacing="0" width="600">
        <tbody>
	    <tr>
                <td width="100%" contenteditable="true"></td>
	    <tr>
        </tbody>
    <table>

3. Click on the last (empty) td and press DELETE key

Expected result

Nothing to happen.

Actual result

1. Zero Width Space is inserted between tables.
2. Cursor disappears.
3. Pressing DELETE again will throw Uncaught TypeError: Cannot read property 'startPath' of undefined ​here. This will cause onKeyDown event propagation which in Chrome and Opera will navigate back in history.

Other details (browser, OS, CKEditor version, installed plugins)

All WebKit browsers. OSX (but I'm fairly sure this affects WebKit browsers on any OS).

Solution

Removing ​range.select(); solves the problem.

It is hard to tell for the uninitiated what's going on here but it seems CKEditor erroneously treats <td contenteditable="true"></td> as if it were a child of content editable block, rather than content editable container. This is further aggravated by handling ​WebKit quirks (if range.select(); is called).

[Sergiy Kuzmenko]

There are actually two separate issues here. Both are triggered on adjacent tables with content editable td when pressing DELETE inside empty cell:

1. Insertion of ZWS between the tables (i.e. outside content editable) is Webkit specific error.
2. Cursor disappearance and subsequent JS error. This one happens in all browsers (in Webkit it's only aggravated by event propagation which moves us back in history).

For my project, I solved this issue by simply capturing and stoping CKEditor's key event. It appears to work well without any side effects. This makes me think that special handling of deletion is a workaround for historical quirks which are no longer present in modern browsers.

[Jakub Ś]

I have tried reproducing this issue in Safari 9.0 on Mac 10.11 and in Chrome on Windows. In both cases nothing happened as expected.

I have tried version 4.5.4-4.5.6 and full package. I could not reproduce it. I have used below code. Did I do something wrong?

CKEDITOR.dtd.$editable.td = 1;
var editor = CKEDITOR.replace( 'editor1', {
	allowedContent : true
});

Could you provide more details perhaps?

---

By the way, why are you modifying dtd? Are you perhaps trying to create a widget? If so why couldn't you use this option for defining table column as editable: ​http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.widget.definition-property-editables