auto-expand on focus (ckeditor)

Hi,
I love the new ckeditor, but I could use some help figuring this out. I'm trying to get the editor to auto-expand the toolbar and the height of the text area when a user clicks in the text area box (i.e. it gains focus). I'm familiar with jQuery... and I seem to have found the focusManager() method but am not sure how to put it all together.

specifically:
1) what is the correct syntax of onFocus event i can bind to?
2) what method do I call to expand the toolbar?
3) what method do I call to resize the text area height?

i currently have something like:
$(document).ready(function() {
$('.ckeditor').each(function()
{
CKEDITOR.replace(this,
{
toolbar : 'new'
});
});
});

thanks!

Tue, 09/01/2009 - 22:52

skunkwerk

Joined: 30/04/2009

Posts: 8

Re: auto-expand on focus (ckeditor)

this works if there's only one ckeditor on the page, but if there's more than one it only works for the last one on the page... any ideas?

for (instance in CKEDITOR.instances)
{
var editor = CKEDITOR.instances[instance];
if (editor)
{
var name = editor.name;
console.log(name);
editor.on('focus', function(event) {
//editor.config.height = '125px'; works, but doesn't reload anything
//autogrow plugin for ckeditor 3 still under development
console.log('firing focus for editor:' + name);
if ($("#cke_top_" + name + " .cke_toolbox").attr('style')=="display: none;")
{
editor.execCommand('toolbarCollapse'); //toggles
}
$("#cke_contents_" + name).attr('style',"height: 125px;");
});
}
}

Tue, 09/01/2009 - 23:23

skunkwerk

Joined: 30/04/2009

Posts: 8

Re: auto-expand on focus (ckeditor)

this version works now:

for (instance in CKEDITOR.instances)
{
var editor = CKEDITOR.instances[instance];
if (editor)
{
editor.on('focus', function(event)
{
//editor.config.height = '125px'; works, but doesn't reload anything
//autogrow plugin for ckeditor 3 still under development
//could use a removeListener instead, but would remove it from all editors even if only 1 expanded
if ($("#cke_top_" + event.editor.name + " .cke_toolbox").attr('style')=="display: none;")
{
event.editor.execCommand('toolbarCollapse'); //toggles
}
$("#cke_contents_" + event.editor.name).attr('style',"height: 125px;");
});
}
}

Fri, 11/19/2010 - 09:40

emmanuel

Joined: 19/11/2010

Posts: 1

Re: auto-expand on focus (ckeditor)

Here's a mod from your code that'll automatically resize the editor based on it's content

for (instance in CKEDITOR.instances) {
      var editor = CKEDITOR.instances[instance];
      if (editor) {
         editor.on('focus', function(event) {
            var f=$("#cke_contents_" + event.editor.name+" iframe");
            var h=f.contents().find("html").height();
            f.height(h);
            $("#cke_contents_" + event.editor.name).attr('style',"height: "+h+"px;");
         });
      }
   }