CKEditor - Widget plugin: How to set focus into nested editable of widget?

Question

I'm working with editable widgets in CKEditor 4.4.0. I've created widget with one editable element in it and it works OK.

But I want to give user possibility to edit editable part right after creation.

What I've tried:

Get widget editable and if it is just created - call .focus() method of this editable on widget ready event:

widget.editables.content.focus();

What I've found - that it would work only if focus call is called in defer.

So basically it works in all browsers except Chrome.

In all browsers after widget.editables.content.focus() called focus is really placed into widget's editable, because widget.focusedEditable variable contains correct value.

But in Chrome widget.focusedEditable variable stays empty, even after widget.editables.content.focus() called.

Reinmar Reinmar · Accepted Answer · 2014-06-10T18:01:31

Without a sample is hard to tell, but I would check one thing - try to place selection in the nested editable. You can use range#moveToElementEditablePosition to set range position in a correct place and then selection.selectRanges( [ range ] ):

nestedEditable.focus();

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

Focusing may not be enough because focus is not so tightly related to selection as it might seem to be. The Widget System consider nested editable focused when it contains selection. If you want to debug this more closely see:

https://github.com/ckeditor/ckeditor-dev/blob/902757f1e0982e414845bd061fe144ca3ad992e3/plugins/widget/plugin.js#L2396-L2413 - selectionChange listener that updates states.
https://github.com/ckeditor/ckeditor-dev/blob/902757f1e0982e414845bd061fe144ca3ad992e3/tests/plugins/widget/nestededitables.js#L740-L745 - some test as an example of the solution I proposed.

CKEditor - Widget plugin: How to set focus into nested editable of widget?

1 Answers