Make TinyMCE Work Properly with JEditable

Question

I'm using the Edit-in-Place JQuery plugin, JEditable: http://www.appelsiini.net/projects/jeditable.

I would like to use TinyMCE when editing, so I found some extra script to make it work: http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin.

The problem I'm having is that, either JEditable or TinyMCE crashes the first time I try to edit something -- but it works perfectly afterwards! Specifically, when I first click the area to edit, TinyMCE loads, but when I clicked on the textarea, the textarea vanishes and becomes the div I was about to edit (as if I never clicked to edit). However, afterwards, the plugin works perfectly unless I refresh the page.

CODE

        <script type="text/javascript" src="jscripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <!-- TinyMCE -->
        <script type="text/javascript" src="jscripts/jquery-1.5.1.min.js"></script> <!-- JQuery-->
        <script type="text/javascript" src="jscripts/jquery.jeditable.mini.js"></script><!-- JEditable plugin-->
        <script type="text/javascript" src="jscripts/jquery.tinymcehelper.js"></script>
        <script type="text/javascript" src="jscripts/jquery.company.js"></script>
<div class="editable_textarea">Edit this div</div>

What's happening is that when I click on the text "Edit this div", TinyMCE loads. But then when I click on the textarea, the textarea vanishes and I just see the text "Edit this div" (as if I didn't click to edit-in-place). I only have this problem when I load/refresh the page. Afterwards, everything works perfectly.

This is my code for jscripts/jquery.tinymcehelper.js (exactly the same as in http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin):

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

function initMCE(){
   tinyMCE.init({
        mode : "textarea",
        theme: "advanced",
        height: "100",
        plugins: "table, tinyautosave, imagemanager, spellchecker, autoresize",
        theme_advanced_buttons1_add_before : "tinyautosave, code, separator, delete_table",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,fontsizeselect,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,code,|,forecolor,backcolor,|,insertimage,spellchecker",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left"
    });
}

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

Finally, this is my "customization" code:

// Jeditable customization
$(function(){
       $(".editable_textarea").editable('ajax/save.php?editnotetext',
        {
          type : 'mce',
          indicator : 'Saving...',
          tooltip : 'Click to edit...',
          name : 'note_text',
          submit : 'OK',
          cancel : 'Cancel',
          height : '100px'
       });
      $(".dblclick").editable('ajax/save.php?editnotename', { 
        tooltip   : 'Doubleclick to edit...',
        indicator : 'Saving...',
        event   : 'dblclick',
        name : 'name',
        style   : 'inherit'
      });
});

Answer 1

The first thing I noticed is that your initMCE() method isn't exactly the same as in the link (I couldn't get to the site, but was able to pull it up from Google cache). Specifically, the mode should be none.

Looking at the TinyMCE docs, it would seem that mode: 'textarea' is meant for auto attaching to <textarea> elements. Whereas, mode: 'none' is meant for programatically adding the editor to a field, which is what the JEditable plugin is trying to do.