Click here to Skip to main content
14,236,507 members

Attach Client Side Event to Ajax HtmlEditorExtender

Rate this:
4.90 (6 votes)
Please Sign up or sign in to vote.
4.90 (6 votes)
30 Dec 2013CPOL
Struggling to attach a Client Side Event to AJAX HtmlEditorExtender? Apply the trick and enjoy.

Introduction

This is an awesome trick which will guide you to add any client side events to a Ajax HtmlEditorExtender.

Background

While coming across one question on CodeProject, I tried to implement this and finally succeeded. Let me explain this to you all.

Using the Code

To add an AJAX HtmlEditorExtender, you need to add the following code in aspx page. Mark the TargetControlID="txtEditor" in HtmlEditorExtender.

<asp:TextBox ID="txtEditor" 

             runat="server" 

             TextMode="MultiLine" 

             Height="600px" 

             Width="600px">
</asp:TextBox>
 
<asp:HtmlEditorExtender ID="htmlEditExtForTextBox" 

                        TargetControlID="txtEditor" 

                        runat="server">
</asp:HtmlEditorExtender> 

Now let's analyze the HTML rendered in browser for this.

For TextBox txtEditor

The TextBox txtEditor is now hidden as we can see below display: none; and visibility: hidden are added to the Style Attribute of TextBox.

<textarea style="height: 600px; width: 600px; display: none; 
visibility: hidden;" id="txtEditor" cols="20" rows="2" name="TextBox1"></textarea> 

For AJAX HtmlEditorExtender

There are many divs generated to facilitate the HTML Editor. But to achieve our task, let's just pull out the main div (with the help of FireBug Inspect Element Feature in FireFox) inside which we enter the text.

<div id="txtEditor$HtmlEditorExtenderBehavior_ExtenderContentEditable" style="height: 80%; overflow: auto; clear: both;" class="ajax__html_editor_extender_texteditor">
</div>  

So, What's Next ?

Now, it is just a matter of attaching any Client Side Event to this rendered div described above. Let's try to attach KeyUp Event.

To do that, we have to place the below script inside Body tags. Putting this in Head tag will not work, as the HtmlEditorExtender is not loaded at that time.

<script type="text/javascript">
    Sys.Application.add_load(function () {
        // Get the Editor Div by Class Name. 
        var htmlEditorBox = $('.ajax__html_editor_extender_texteditor');
        
        // Attach the keyup Client Side Event to the above div.
        htmlEditorBox.keyup(function () {
            alert(this.textContent);
        });
    });
</script> 

The code is quite self explanatory. It gets that main Editor div by its class name. Then alerts its Text Content.

Points of Interest

  • As we attach keyUp Event, we can attach any Event with the HtmlEditorExtender.
  • Please don't forget to include the jQuery file inside head tags as we are using jQuery while attaching the Event. You can also directly include the below script to include the latest jQuery file.
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  

History

  • 30 December 2013 - First version submitted for approval

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
Official Facebook Page - Tadit Dash

Proud Indian | Microsoft MVP | CodeProject MVP | Speaker | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cook | Dancer

Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles


jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013
  7. </

Comments and Discussions

 
QuestionSmall Point Pin
Frank Kerrigan13-Aug-15 0:29
memberFrank Kerrigan13-Aug-15 0:29 
AnswerRe: Small Point Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Aug-15 0:37
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Aug-15 0:37 
GeneralMy vote of 5 Pin
Sibeesh KV13-Nov-14 3:14
professionalSibeesh KV13-Nov-14 3:14 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:28
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)13-Nov-14 3:28 
GeneralRe: My vote of 5 Pin
Sibeesh KV13-Nov-14 3:36
professionalSibeesh KV13-Nov-14 3:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Tip/Trick
Posted 30 Dec 2013

Stats

11.1K views
2 bookmarked