257
Views
5
Comments
Solved
How to set ckeditor focus by using javascript
Question

Hi All,

I am wondering how to set CKEditor focus by using javascript. I tried to set the input widget that replaced by CKEditor focus with javascript code like "document.getElementById(input.id).focus()". But it did nothing. I guess that because it is replaced by CKEditor and I can't access it with its original Id (input.id). So, how could I achieve that? Use CKEditor Id? Or use javascript located in CKEditor web block?

Rank: #118
Solution

Hi Hongnan,

Try this:

$('.cke_wysiwyg_frame').contents().find('.cke_editable').focus();
Rank: #118

Hi,

It's the CSS class assigned to the iframe element that contains the CKEditor text editor. So that piece of javascript first selects the iframe, then searches its contents for an element with the ".cke_editable" class and then sets the focus on it.

Rank: #118

Hi André,

You can tweak the javascript to set the focus according to the index of the desired CK Editor. For instance, this code sets the focus on the first CK Editor:

$('.cke_wysiwyg_frame').eq(0).contents().find('.cke_editable').focus();

If you wanted to set the focus on the second CK Editor, you'd use this:

$('.cke_wysiwyg_frame').eq(1).contents().find('.cke_editable').focus();