CKEditor - Widget插件：如何将焦点设置到小部件的嵌套可编辑区域？

Question

我正在使用CKEditor 4.4.0中的可编辑小部件。我已经创建了一个带有一个可编辑元素的小部件，并且它可以正常工作。

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

我尝试过：

获取小部件可编辑性，如果刚刚创建 - 在小部件准备就绪事件中调用此可编辑的.focus（）方法：

widget.editables.content.focus();

我发现，只有在延迟调用焦点调用时才能起作用。

所以基本上，在除了Chrome之外的所有浏览器中都可以正常工作。

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

但是在Chrome中，即使调用了widget.editables.content.focus()，widget.focusedEditable变量仍然为空。

- Dmitry Zaets

Answer 1

没有示例很难判断，但我建议检查一个事情——尝试在嵌套可编辑区域中进行选择。您可以使用range#moveToElementEditablePosition来设置范围位置，然后使用selection.selectRanges( [ range ] )：

nestedEditable.focus();

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

注重焦点可能不够，因为焦点与选择并没有像看起来那样紧密相关。如果 Widget System 包含选择，则可嵌套的可编辑部件即被视为已聚焦。如需更详细的调试信息，请参见以下内容：

• 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 - 作为我提出解决方案的示例的某些测试。

- Reinmar