javascript - 在上下文菜单中编辑 Div 未抓取正确的 Div(CKEditor v. 4.6.2)

Question

我遇到了一个问题，当我右键单击并从上下文菜单中单击带有以下 HTML 对象的“编辑 Div”时，CKEditor 没有抓取正确的 div。例如，当我右键单击“well”div 时，我在 Edit Div 模式窗口中返回了“jumbotron”。当我右键单击并编辑“面板”div 时，我也得到了“容器”div。这是一个已知的问题？有什么解决方法吗？

<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

我认为问题中有一个小错误，因为同时单击 well 和 panel div 将返回 container div。

原因是您所指的插件 ( Div Container Manager ) 适用于 div 容器，而不适用于普通 div。我所说的 div 容器是指内部有子段落或子 div 的 div。上下文菜单实际上仅针对 container 和 jumbotron div 显示。您可能认为它应该与 panel 和 well 一起使用，但是如果例如panel div 未嵌套在 container 中，不会显示用于编辑/删除 div 的上下文菜单。

编辑器使用这段代码获取最外层的div:https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/div/plugin.js#L126-L131

请将您的 HTML 粘贴到编辑器中，打开浏览器控制台，在 panel div 中单击并在控制台中执行以下代码。您会注意到返回了 container div。

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();
});

总而言之 - 这就是这个插件的工作原理。