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 [:)]

Use Multiple Controls to open ajaxToolkit:CalendarExtender control..

Problem Area: Check out the image above, its showing a calendar control which is being displayed on click of Image button adjacent to text box. Now if you want to display calendar on click of both text box as well as image button then there will be a problem. You can set one control at a time in PopupButtonID property. That means in above scenario either you can use textbox to open this calendar OR you can use image to open calender. Now there is small trick to perform this. Yes, you can use a simple trick and make it open on click of both textbox and image.

Solution: Set PopupButtonID property of the control with multiple control ids as shown in following example.


< ajaxtoolkit:calendarextender id="CalendarExtenderStartDate" runat="server" targetcontrolid="StartDateText" popupbuttonid="StartDateText DateStart">< id="CalendarExtenderStartDate" runat="server" targetcontrolid="StartDateText" popupbuttonid="StartDateText DateStart">


Use popupbuttonid property and specify various control Ids in it.(separated by space)

Thanks....

How to use Text Wrap feature in Mozilla...

For using text wrap in Mozilla you need to perform following steps:


1. Create following javascript function :

function textwrap()
{
if (ie==0)
{
var tag = document.getElementsByTagName("span");
for (var i = 0; i < classname ="=" text_final =" tag.item(i).innerHTML;" re =" /(<([^">]+)>)/gi;
text_final = text_final.replace(re, "")

tag.item(i).innerHTML = text_final.replace(/(.*?)/g, "< wbr >");
}
}
}
}



-------------------------------------------------------------------------------------------

2.
Call textwrap() javascript function on your page and call it only for browser mozilla.....
Here I am assuming that you have already identified the browser type.....

textwrap();


3.
Apply the CSS class named "wraptext" to the label control who's text you want to wrap.
E.g. test.CssClass = "wraptext";


IE can handle word wrap with some CSS properties so there is no need to use above mentioned Javascript function. In case of IE we can simply use following CSS properties:

style="word-wrap: break-word; text-wrap: wrap;"