Edit Div in Context Menu Not Grabbing Correct Div (CKEditor v. 4.6.2)

Question

I am running into an issue where the CKEditor is not grabbing the correct div when I right click and click 'Edit Div' from the context menu with the below HTML objects. For example, when I right click on the 'well' div and I get 'jumbotron' returned on the Edit Div modal window. I also get the 'container' div when I right click and edit the 'panel' div. Is this a known issue? Any workarounds for this?

<div class="container">
<div class="jumbotron">
<h1>Jumbotron</h1>

<p>Sample text here </p>
</div>

<div class="well">this is a well</div>

<div class="panel">this is a panel</div>
</div>

Answer 1

I believe there is a slight mistake in the question as clicking on both well and panel divs will return the container div.

The reason for it is that plugin you are referring to (Div Container Manager), works with div containers and not with plain divs. By div container I mean a div having child paragraphs or child divs inside. Context menu is in fact being only shown for container and jumbotron divs. You may have gotten the idea that it should work with panel and well but if e.g. panel div was not nested inside the container context menu for editing/removing div would not be shown.

The editor uses this code to get the outermost div: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/div/plugin.js#L126-L131

Please paste your HTML into the editor, open the browser console, click inside the panel div and execute the code below in the console. You will notice that container div is returned.

var editor = CKEDITOR.instances.editor1; 
var path = editor.elementPath( editor.getSelection().getStartElement() ); editor.elementPath( path.blockLimit ).contains( 
function( node ) {
return node.is( 'div' ) && !node.isReadOnly();
});

To summarize - this is how this plugin works.