Handling FCKEditor Events Using Javascript

Handling FCKEditor Events Using Javascript

In order to exploit events of FCKEditor we need to use following javascript function. Here I am using onblur and onfocus events of FCKEditor to collapse and expand the toolbar when the user places the cursor in or out of the editor panel.

The first method "FCKeditor_OnComplete" will fire once the FCKEditor is loaded completely and will attached onBlur and OnFocus events to the editor instance.

< type="text/javascript">
function FCKeditor_OnComplete( editorInstance )
{
editorInstance.Events.AttachEvent( 'OnBlur' , FCKeditor_OnBlur ) ;
editorInstance.Events.AttachEvent( 'OnFocus', FCKeditor_OnFocus ) ;
}

function FCKeditor_OnBlur( editorInstance )
{
editorInstance.ToolbarSet.Collapse() ;
//alert('Lost Focus');
}

function FCKeditor_OnFocus( editorInstance )
{
var oEditor = FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID%>').EditorWindow.parent ;
editorInstance.ToolbarSet.Expand() ;
//alert('Got Focus');
}




FCKEditor declaration in HTML:

<>
<>
<>
< id="FCKeditor1" basepath="~/fckeditor/" runat="server" toolbarset="Basic" width="550" height="450">
< /td>
< /tr>
< /table>


The purpose of showing declaration of FCKEditor here is to make user clear about the use of "FCKeditor_OnComplete" method. user need not to call this method from any part of FCKEditor. In fact this method will call itself once the loading is complete.