I am using the jQuery Edit-in-Place, JEditable plugin: http://www.appelsiini.net/projects/jeditable .
I would like to use TinyMCE when editing, so I found some additional script to make it work: http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin .
The problem I encountered is that the first time I run JEditable or TinyMCE I try to edit something, but after that it works great! In particular, when I first click on the edit area, TinyMCE loads, but when I click on the text field, the text field disappears and it becomes a div that I had to change (as if I never clicked to edit). However, after that, the plugin works fine if I do not refresh the page.
CODE
<script type="text/javascript" src="jscripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="jscripts/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jscripts/jquery.jeditable.mini.js"></script> <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 happens when I click on the text “Edit this div”, TinyMCE loads. But then, when I click on the text box, the text box disappears and I just see the text “Edit this div” (as if I didn't click on the edit in place). I have this problem when I load / refresh the page. Subsequently, everything works fine.
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 "setup 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' }); });