Toggle toolbar on focus/blur

I seem to have a problem making the following v2.6.5 code work in v3.3.1:

function FCKeditor_OnComplete( editorInstance ) {
   editorInstance.Events.AttachEvent( 'OnBlur', FCKeditor_OnBlur );
   editorInstance.Events.AttachEvent( 'OnFocus', FCKeditor_OnFocus );
}
function FCKeditor_OnBlur( editorInstance ) {
   editorInstance.ToolbarSet.Collapse();
}
function FCKeditor_OnFocus( editorInstance ) {
   editorInstance.ToolbarSet.Expand();
}

I have tried putting ToolbarCollapse calls on editorinstance focus/blur inside a general instanceReady event, but the only effect is to make the toolbar appear when the first thing I do is to place the cursor in the editing area. The opposite will never happen, and if I close the toolbar and move the cursor to another field and back into the editing area it stays closed.

Can someone help shead some light on what to do?

Tue, 05/31/2011 - 11:17

oiha

Joined: 12/07/2010

Posts: 2

Re: Toggle toolbar on focus/blur

So I got no replies to this post in close to a year, and no help is available anywhere in this community. No real replies to any post like this - not even a working example to be copied.

The closest thing to a reply is to use "execCommand('ToolbarCollapse')" which really is to toggle the display, not set it to expand/collapse as desired. As explained in the original post, this toggle is hard to get to work at it looses interest as soon as the command has been performed once. So maybe I am stupid?

A would very much like some help on this, and a working example would be appreciated. For FCKEditor such an example was available from the makers, but for the CKEditor there are no migration help.

Tue, 07/05/2011 - 20:01

fortun8

Joined: 05/07/2011

Posts: 1

Re: Toggle toolbar on focus/blur

I tried to do the same thing with some success. What I did was to put the toolbar in a separate <DIV> that I could show/hide with jQuery upon focus/blur. It acts a bit quirky in IE8 and IE9 but works fairly well in Firefox. The biggest annoyance is when a menu pops up in the toolbar, the toolbar collapses. Let me know if you can fix that. Here's some sample code:

<script type="text/javascript">
$(document).ready(function()
{
   // Set up Highlights HTML textarea
   var config = {
          // Specify what controls are in the toolbar
          toolbar:
          [
          { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'JustifyLeft', 'JustifyCenter', 'JustifyRight',] },
         { name: 'colors', items: ['TextColor', 'BGColor'] },
         { name: 'links', items: ['Link', 'Unlink'] },
         { name: 'styles', items: ['Format', 'Font', 'FontSize'] }
      ],
      // Use skin 'v2'
      skin: 'v2',
      // Don't show HTML elements path at bottom
      removePlugins: 'elementspath',
      // Don't allow user to collapse toolbar since we do that automatically
      toolbarCanCollapse : false,
      // Don't allow user to resize textarea
      resize_enabled: false,
      // Set initial width and height
      width: '420px',
      height: '150px',
      // Put toolbar in a separate DIV so we can hide/show automatically
      sharedSpaces: { top: 'tahighlightsTBdiv' }
   };
   var tahighlightsEditor = $('#tahighlights').ckeditor( config );
   // Add onFocus and onBlur callbacks to CKEditor instances so we can automatically hide/show toolbar
   // For each editor instance
   for (instance in CKEDITOR.instances)
   {
      var editor = CKEDITOR.instances[instance];
      if ( editor )
      {
         // Call showTBDiv() when editor get the focus
        editor.on('focus', function (event)
        {
                   showTBDiv( event );
         });
        // Call hideTBDiv() when editor loses the focus
        editor.on('blur', function (event)
        {
                   hideTBDiv( event );
        });
      }
   }
});
         // Called whenever a CKEditor get focus.  We will show the corresponding toolbar DIV.
         function showTBDiv( event )
         {
            // Select the correct toolbar DIV and show it.  'event.editor.name' returns the name of the DIV receiving focus.
            $('#'+event.editor.name+'TBdiv').show();
         }
                           
         // Called whenever a CKEditor loses focus.  We will hide the corresponding toolbar DIV.
         function hideTBDiv( event )
         {
            // Select the correct toolbar DIV and hide it.  'event.editor.name' returns the name of the DIV receiving focus.
            $('#'+event.editor.name+'TBdiv').hide();
         }
</script>
...
                  <div id="tahighlightsTBdiv" style="width: 419px; margin: 0 0 0 20px; border: 1px solid #000000; display: none;">
                  </div>
                  <div style="width: 419px; margin: 0 0 0 20px; border: 1px solid #000000;">
                     <textarea id="tahighlights" name="tahighlights" rows="6" cols="50">
                        Fill-in your text here
                     </textarea>
                  </div>

Mon, 05/05/2014 - 21:58

russell@schooll...

Joined: 06/04/2014

Posts: 3

As I came to this old thread

As I came to this old thread and didn't find easy solutions elsewhere I thought I'd post my jQuery style answer... It hides tooldbar until focus.
id is the variable holding the name.
I use this in a function so I can set up multiple instances on a page with this behavior.

jQuery("#" + id).ckeditor(options);
CKEDITOR.instances[id].on("instanceReady", function (e) {
jQuery("#cke_" + id + " [id$='_top']").hide();
this.on("focus", function () {
jQuery("#cke_" + id + " [id$='_top']").show();
});

});