title: Make TinyMCE Work Properly with JEditable
body: <p>I'm using the Edit-in-Place JQuery plugin, JEditable: <a href="http://www.appelsiini.net/projects/jeditable" rel="nofollow">http://www.appelsiini.net/projects/jeditable</a>. </p>
  
  <p>I would like to use TinyMCE when editing, so I found some extra script to make it work: <a href="http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin" rel="nofollow">http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin</a>.</p>
  
  <p>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.</p>
  
  <p>CODE</p>
  
  <pre><code>        &lt;script type="text/javascript" src="jscripts/tinymce/jscripts/tiny_mce/tiny_mce.js"&gt;&lt;/script&gt; &lt;!-- TinyMCE --&gt;
          &lt;script type="text/javascript" src="jscripts/jquery-1.5.1.min.js"&gt;&lt;/script&gt; &lt;!-- JQuery--&gt;
          &lt;script type="text/javascript" src="jscripts/jquery.jeditable.mini.js"&gt;&lt;/script&gt;&lt;!-- JEditable plugin--&gt;
          &lt;script type="text/javascript" src="jscripts/jquery.tinymcehelper.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="jscripts/jquery.company.js"&gt;&lt;/script&gt;
  &lt;div class="editable_textarea"&gt;Edit this div&lt;/div&gt;
  </code></pre>
  
  <p>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). <strong>I only have this problem when I load/refresh the page. Afterwards, everything works perfectly.</strong> </p>
  
  <p>This is my code for jscripts/jquery.tinymcehelper.js (exactly the same as in <a href="http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin" rel="nofollow">http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin</a>):</p>
  
  <pre><code>$.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 = $('&lt;textarea id="'+$(original).attr("id")+'_mce"/&gt;');
          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();
     }
  });
  </code></pre>
  
  <p>Finally, this is my "customization" code:</p>
  
  <pre><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'
        });
  });
  </code></pre>