Thursday, May 28, 2009

Build the client-side contentChanged event of HTML Editor -- hook keypress client event of Editor content

In this time, let us talk about HTML Editor. We can see HTML Editor has three modes: Design, HTML Text and Preview mode.
Design mode is in an IFrame actually. HTML Text is prensented in a TextArea and Preview mode is in another Iframe. The code rendered about these three modes is as below.

Design mode:

<iframe id="editor1_ctl02_ctl00" name="editor1_ctl02_ctl00" marginheight="0" marginwidth="0" frameborder="0" src="javascript:false;" style="height:100%;width:100%;display:none;border-width:0px;">
</iframe>



HTML Text mode:

<textarea id="editor1_ctl02_ctl01" class="ajax__htmleditor_htmlpanel_default" style="height:100%;width:100%;display:none;">
</textarea>


Preview mode:

<iframe id="editor1_ctl02_ctl02" name="editor1_ctl02_ctl02" marginheight="0" marginwidth="0" frameborder="0" src="javascript:false;" style="height:100%;width:100%;display:none;border-width:0px;">
</iframe>


In design mode, we can use the following JavaScript to append a callback function in onKeypress event so that we can do somthing when content is changed on client.

<script type="text/javascript">
        var count = 0;
        function pageLoad() {
            $get('editor1_ctl02_ctl00').contentWindow.document.body.onkeypress = function() {
                count++;
                $get('cc').innerHTML = "you input " + count + "charactors";        

            };
        }

</script>


As the same way, you can append another keypress event on TextArea and Preview IFrame.

If you'd like to do something on server-side when you typed in content of Editor, you can call Web Service to achieve it.

1 comment:

Vince said...

Great article....
___________________

Vince

Your movies on demand