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.