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.

Validate FCK Editor Using Custom Validator

Validate FCK Editor Using Custom Validator

In asp.net there is no direct way to validate FCKEDITOR so In order to do so we need to write a java script function which will validate FCKEDITOR on client side.

Here are the steps to make it possible:

Step1: Include following javascript function in ur html part.

< script language="javascript" type="text/javascript">
function ValidateFCK(source, args) {

var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID %>');
args.IsValid = fckBody.GetXHTML(true) != "";
}



Step2: Now add a asp Custom Validator in ur HTML part and call ValidateFCK function.

< asp:CustomValidator Text="" runat="server" ID="CustValDesc" ControlToValidate="FCKeditor1" ClientValidationFunction="ValidateFCK" ValidateEmptyText="True">

Thats it [:)]