jEditable: pass TinyMCE content back to textarea

Question

Hi I have a mix of tinyMCE jquery plugin and jeditable on a textarea. When the editable element is clicked it is turned into a tinymce iframe. Now I need to pass the iframe content back to the textarea using tinymce.triggerSave() BEFORE the form is ajaxed.

Anyone any idea?

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

The code above calls the editNote function and then the tinymce js.

I'm looking for a way to run tinyMCE.triggerSave(); BEFORE the jeditable form is submitted. So something like the opposite of callback.

Thanks,

Billy

Kamil Sindi Kamil Sindi · Accepted Answer · 2011-05-11T19:59:13

Add this piece of code instead. You basically create a new type called 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);
   }
});

In your JEditable initiation make it of type mce. So:

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

jEditable: pass TinyMCE content back to textarea

1 Answers