conventional javascript onchange event and blur event for Tinymce editor

Question

I have 2 textarea that I am switching back and forth. A timymce text editor textarea and a normal text area. Whatever I inputted in the tinymce text editor should be reflected to the normal text area also and vice versa. I have done this successfully through onclick event in javascript but not with onchange and onblur. I want to get it like how I get it using onclick event. Is there anyway to do this? If none, can somebody gives me another solution? Thanks for the help. Here is my code:

<div id="tabs">

 <ul>
     <li class="rich_zone"><a class="rich_text" href="#tabs-1">Rich Text Editor</a></li>
     <li class="normal_zone"><a class="normal_text" href="#tabs-2">Normal Text</a></li>
 </ul>

 <div class="row" id="tabs-1" style="clear:both;">
      <div class="span7"><?php  echo form_textarea($course_desc);?> </div>
 </div>

 <div class="row" id="tabs-2" style="clear:both;">
       <div class="span7"><?php  echo form_textarea($course_desc_normal);?> </div>
 </div>

my javascript onclick event (working successfully):

$(".rich_zone").click(function(){
var normal_text = $(".course_desc_normal").val();
tinyMCE.activeEditor.setContent(normal_text);
});

$(".normal_zone").click(function(){
var rich_text = tinymce.get('course_desc').getContent({format:'text'});
$(".course_desc_normal").val(rich_text);
});

javascript onchange event (not working)

  $(".rich_zone").change(function(){
  var normal_text = $(".course_desc_normal").val();
 tinyMCE.activeEditor.setContent(normal_text);
  });

 $(".normal_zone").change(function(){
 var rich_text = tinymce.get('course_desc').getContent({format:'text'});
 $(".course_desc_normal").val(rich_text);
 });

javascript onblur event (not working)

  $(".rich_zone").blur(function(){
  var normal_text = $(".course_desc_normal").val();
 tinyMCE.activeEditor.setContent(normal_text);
  });

 $(".normal_zone").blur(function(){
 var rich_text = tinymce.get('course_desc').getContent({format:'text'});
 $(".course_desc_normal").val(rich_text);
 });

sudhAnsu63 sudhAnsu63 · Accepted Answer · 2013-10-08T14:07:11

You can track the changes in the Editer in a similar way. Note below code is for CKEDITOR.

//Code to track Change in Editor
            //this code segment required to be on top
            //prior to creating instances
            CKEDITOR.on('instanceCreated', function (e) {
                e.editor.on('contentDom', function () {
                    e.editor.document.on('keyup', function (event) {

                   //do your stuff here.
                        alert("modified");
                    });
                });
            });

conventional javascript onchange event and blur event for Tinymce editor

1 Answers