传统的javascript onchange事件和Tinymce编辑器的模糊事件

时间:2013-10-08 14:01:07

标签: javascript jquery html tinymce

我有2个textarea,我来回切换。一个timymce文本编辑器textarea和一个普通的文本区域。无论我在tinymce文本编辑器中输入什么,都应该反映到普通文本区域,反之亦然。我通过javascript中的onclick事件成功完成了此操作,但没有使用onchange和onblur。我希望得到它就像我使用onclick事件得到它。反正有没有这样做?如果没有,有人可以给我另一种解决方案吗?谢谢您的帮助。这是我的代码:

<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>

我的javascript onclick事件(成功运行):

$(".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事件(不工作)

  $(".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事件(不工作)

  $(".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);
 });

1 个答案:

答案 0 :(得分:0)

您可以以类似的方式跟踪编辑器中的更改。 请注意以下代码适用于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");
                    });
                });
            });