# Friday, 08 January 2010
« The reappearing calendar. A gotcha to av... | Main | Getting to know Agile a little more. »

In a couple of earlier posts I used jQuery to add a character counter to the ASP.Net AJAX HTML Editor.  I was contacted by a reader stating that when they modified the editor’s toolbar items the character counter stopped working.  After a small bit of troubleshooting I noticed the toolbar items drive the number of IFrames created.

The fix is small but requires some sleuthing that we can do with firebug to identify the correct IFrame we should be targeting.  With firebug console and our browser open to the url for our application we can type in $('#Editor1').contents().find('iframe').eq(0).  This grabs the first IFrame.  Be sure to change "Editor1" to the name of your control.

FirebugShot1

If we hover over the item in the brackets it will highlight the IFrame selected.  If the text area for the control isn’t highlighted then change the index value and try again until the text area is highlighted.

FirebugShot2

To be sure we have the right IFrame, click on the item in the brackets and it shows the HTML.  Look for the text you typed in to be sure.

FirebugShot3

Now that we’ve identified the correct index for the IFrame based on a customized editor we’ll need to change the GetEditor Function with this correct value.

function GetEditor() {
    return editor = $(Editor1).contents().find('iframe').eq(0);
}

You should be ready to go now! But wait! There’s more…

I was dissatisfied with having to hunt for the correct index value and thankfully there is a better way.  I noticed while trying this out on several scenarios that the IFrame we want is given the same ID.  At first, I didn’t think this would work since the ID is assigned by ASP.Net but it seems in this case we can trust it (could be my famous last words).  The IFrame is always given an ID of ControlName_ctl02_ctl00 or in this case Editor1_ctl02_ctl00.

Armed with this we can change the code to:

function GetEditor() {
    return editor = $(Editor1 + '_ctl02_ctl00')
}

That's a little better. We don't have to hunt for the correct index value for the IFrame used for the text.

Please download the code and give it a spin! AjaxHtmlEditorV3.zip (1.01 MB)

Happy Coding!

Read the earlier posts.

Posted 01.08.2010  #    Comments [2]  |