CKE4.0.1 - howto get a valid selection on a contenteditable=false span in chrome, ok in ie9

I'm experiencing the same problem. Some more details, this is my text:

<p>Some test text - 1.</p>

<div class="cm11Form" contenteditable="false" data-cm11-formid="1">Form block. The form 'contact' will be inserted here.</div>

<p>Some test text - 2.</p>

I have a plugin that removes blocks like the form block you see above. So it adds a context menu for blocks (div's), with the delete block action.

CKEDITOR.plugins.add('fwcontent', {
    init: function(editor)
    {
        editor.addCommand('fwcontent_delete_block', new CKEDITOR.deleteBlockCommand());
        
        if (editor.addMenuGroup
                && editor.addMenuItem) {
            editor.addMenuGroup('fwcontent', 90);
            editor.addMenuItems({
                    fwcontent_delete_block: {
                        label: 'Remove block',
                        command: 'fwcontent_delete_block',
                        group: 'fwcontent'
                    }
            });
        }
        if (editor.contextMenu) {
            editor.contextMenu.addListener(function(element) {
    			if (element && (element.is('div') || element.hasAscendant('div'))) {
                    console.log(element);
                    return {
                        fwcontent_delete_block: CKEDITOR.TRISTATE_OFF
                    };
                }
                return null;
            });
        }
    }
});

CKEDITOR.deleteBlockCommand = function() {};
CKEDITOR.deleteBlockCommand.prototype = {
    exec: function(editor)
    {
        var selectedNode = null,
            element = null,
            selection = editor.getSelection();
        if (selection !== null) {
            element = selection.getStartElement();
            if (element !== null) {
                console.log(element);
                if (element.is('div')) {
                    selectedNode = element;
                }
                if (element.hasAscendant('div')) {
                    selectedNode = element.getAscendant('div');
                }
            }
        }
        if (selectedNode) {
            selectedNode.remove();
        }
    }
};

The point is that in Chrome 26.0.1410.64 m, the console.log inside the context menu listener enlists the correct element (the div.cm11Form). But inside the action (deleteBlockCommand) the start element of the selection is the document's first p (Some test text - 1).

Now the fun part, when I remove contenteditable="false" from the div, everything works as expected.

Can anyone help out. I have the feeling this is a Chrome/Webkit bug, because we are experiencing this in the last few weeks (end of April 2013). We've tried upgrading from CKEditor 4.0 to CKEditor 4.1.1, but this does not fix this. In IE9 all is fine.

Nobody else experiencing this?

Selection is ok, but cannot get element from it, getStartElement() or getSelectedElement() returns null

Nothing we can do here since it's a form of hack, which is dependent on the browser's API, and in this case Chrome has a problem with it. The new Widgets feature, which will be included in 4.2, will help remedy this problem.

To workaround problems which browsers have with selecting non-editable elements we implemented the Widgets System which uses fake selections. I strongly recommend looking into it if you want to use non-editable elements inside editor.

Well... there are no ready to use recipes for everything, but the widget API is documented very thoroughly. For example you're most likely referring to the widget wrapper which is an instance of element and therefore has methods like setAttribute. Additionally, API refers in many places to the init property which is a callback executed when widget is instantiated. There's also a ready callback.