jEditable:将TinyMCE内容传递回textarea

时间:2011-05-09 13:45:30

标签: javascript ajax jquery-plugins tinymce jeditable

您好我有一个tinyMCE jquery插件和texedrea上的jeditable混合。单击可编辑元素时,它将变为tinymce iframe。现在我需要在表单被ajaxed之前使用tinymce.triggerSave()将iframe内容传递回textarea。

有人有任何想法吗?

    function editNote(){
    $('.edit').editable('<?php echo base_url(); ?>index.php/notes/edit', {
         type      : 'textarea',
         onblur    : 'ignore',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='<?php echo base_url(); ?>css/images/indicator.gif'>",
         tooltip   : 'Click to edit...'

     });
 }

 $('.edit').live('click', function(){
    editNote();
    $('textarea').tinymce({
                    // Location of TinyMCE script
                    script_url : '<?php echo base_url(); ?>js/tiny_mce/tiny_mce.js',

                    // General options
                    theme : "simple"
});
});

上面的代码调用editNote函数,然后调用tinymce js。

我正在寻找一种运行tinyMCE.triggerSave()的方法;在提交可转换表单之前。所以类似于回调的反面。

谢谢,

比利

1 个答案:

答案 0 :(得分:1)

添加这段代码。您基本上创建了一个名为mce的新类型。

$.fn.tinymce = function(options){
   return this.each(function(){
      tinyMCE.execCommand("mceAddControl", true, this.id);
   });
}

function initMCE(){
   tinyMCE.init({
        mode : "textarea",
        theme : "advanced",
        ... // YOUR CUSTOMIZATION
      });
}

initMCE();

$.editable.addInputType('mce', {
   element : function(settings, original) {
      var textarea = $('<textarea id="'+$(original).attr("id")+'_mce"/>');
      if (settings.rows) {
         textarea.attr('rows', settings.rows);
      } else {
         textarea.height(settings.height);
      }
      if (settings.cols) {
         textarea.attr('cols', settings.cols);
      } else {
         textarea.width(settings.width);
      }
      $(this).append(textarea);
         return(textarea);
      },
   plugin : function(settings, original) {
      tinyMCE.execCommand("mceAddControl", true, $(original).attr("id")+'_mce');
      },
   submit : function(settings, original) {
      tinyMCE.triggerSave();
      tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
      },
   reset : function(settings, original) {
      tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
      original.reset(this);
   }
});

在你的JEditable启动中,使它成为mce类型。所以:

    $(".edit").editable('ajax/save.php?editnotetext', {
        type : 'mce',
        ... // etc
    });