Post
Ask Question

HTMLEditor Control Raise any Client-Side Events

HTMLEditor Control Raise any Client-Side Events 

 
The HTML Editor has three modes: Design, HTML Text, and Preview mode.
 
The design mode is in an IFrame. HTML Text is presented in a TextArea and the preview mode is in another Iframe. The code rendered about these three modes is as below:
  1. <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;">  
  2. /iframe>  
  1. <textarea id="editor1_ctl02_ctl01" class="ajax__htmleditor_htmlpanel_default" style="height:100%;width:100%;display:none;">  
  2. /textarea>  
  1. <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;">  
  2. /iframe>  
In the design mode, we can use the following JavaScript to append a callback function in onKeypress event.
  1. < script type = "text/javascript" >  
  2.  var count = 0;  
  3. function pageLoad() {  
  4.  $get('editor1_ctl02_ctl00').contentWindow.document.body.onkeypress = function() {  
  5.   count++;  
  6.   $get('cc').innerHTML = "you input " + count + "charactors";  
  7.  };  
  8. }  
  9. /script>  
In the same way, you can append another keypress event on the TextArea and preview IFrame.