javascript - CKEditor - 小部件插件 : How to set focus into nested editable of widget?

Question

我在 CKEditor 4.4.0 中使用可编辑的小部件。 我创建了其中包含一个可编辑元素的小部件，它工作正常。

但我想让用户在创建后立即编辑可编辑部分。

我尝试过的:

让小部件可编辑，如果它刚刚创建 - 在小部件就绪事件上调用.focus()方法这个可编辑:

widget.editables.content.focus();

我发现 - 只有在 in defer 调用焦点调用时它才会起作用。

所以基本上它适用于除 Chrome 之外的所有浏览器。

在所有浏览器中，在 widget.editables.content.focus() 调用焦点后，真正将焦点放入小部件的可编辑区域，因为 widget.focusedEditable 变量包含正确的值。

但在 Chrome 中，widget.focusedEditable 变量保持为空，即使在 widget.editables.content.focus() 调用之后也是如此。

Answer 1

没有样本很难判断，但我会检查一件事 - 尝试将选择放在嵌套的可编辑项中。您可以使用 range#moveToElementEditablePosition在正确的位置设置范围位置，然后 selection.selectRanges( [ range ] ):

nestedEditable.focus();

var range = editor.createRange();
range.moveToElementEditablePosition( nestedEditable );
editor.getSelection().selectRanges( [ range ] );

聚焦可能还不够，因为聚焦与选择的关系并不像看起来那样紧密。小部件系统在包含选择时考虑嵌套可编辑焦点。如果您想更仔细地调试它，请参阅:

• https://github.com/ckeditor/ckeditor-dev/blob/902757f1e0982e414845bd061fe144ca3ad992e3/plugins/widget/plugin.js#L2396-L2413 - selectionChange 更新状态的监听器。
• https://github.com/ckeditor/ckeditor-dev/blob/902757f1e0982e414845bd061fe144ca3ad992e3/tests/plugins/widget/nestededitables.js#L740-L745 - 一些测试作为我提出的解决方案的例子。