One tinyMCE instance moved between multiple text areas?

Question

Using jQuery version of tinyMCE.

I have a content page where there can be many pieces of text that can be clicked. Therefore, when the user clicks on one of these elements, we want to replace the DIV with text with a tinyMCE instance containing the text.

So, initially I called it

$.getScript('/js/tiny_mce/jquery.tinymce.js', function() {
    $(dummyTextarea).tinymce({
...tinyMCE initialise stuff
})

and that was in the onclick div. But this, of course, is very awkward, as it will execute an ajax request, etc. And get tinymce again and again every time something clicks. So instead, I want to initialize one tinyMCE instance when the page loads, and then onclick, just set the active text area as my already loaded tinyMCE instance. I can't figure out how to do this with the jquery tinymce version. Is it possible? Any suggestions?

Answer 1

In the document ready event, you can make a getScript call. This will pull the tinyMCE bits into memory. Then, in DIV click events, you can initialize tinyMCE on demand.

$(function() {
    $.getScript('/js/tiny_mce/jquery.tinymce.js');
    $('DIV').click(function() {
        $(this).tinymce({ // initialization stuff });
    });
});

Answer 2

for me,

$('DIV').click(function()  { ...

, :

//Notes:
// Create an empty div (with class "center") with the same width of the bar and use css("margin: auto")
// and modify ui.css like this:
// .mceExternalToolbar {position:fixed !important; top: 0px !important; z-index:1; display:none; }
// You can perform those changes with jquery as well.
// Use any HTML element (div, textarea, etc) with class ".ed" and an id, to convert it to tinyMCE editor on click.
// Create a PHP file to handle post.
$(document).ready(function() {
 $(".ed").tinymce({
  //(settings here)
  theme_advanced_toolbar_location : 'external', 
  theme_advanced_toolbar_align : 'left', 
  setup: function(ed){
   ed.onInit.add(function() { 
    $(".mceExternalToolbar").css('left', $("div.center").position().left);
    $("table.mceLayout").css('height', 'auto');
    ed.hide();
   });
  },
  save_onsavecallback: function(ed) {
   $(".ed").each(function (e) {
    $.post("save.php",{ id : $(this).attr("id"), body : $(this).html() },
     function(reply){
      //handle php response
      alert(reply);
     }
    );
   });
   ed.hide();
  }
 });
 //Activate editor on click
 $(".ed").click(function() {
  $(this).tinymce().show();
 });
 //Adjust mce Toolbar position again in center when window is resized
 $(window).bind("resize", function resizeWindow( e ) {
   $(".mceExternalToolbar").css('left', $("div.center").position().left);
 });
});

Answer 3

... , TinyMCE, div?

var pos = $('#text_div_id').position();
var w = $('#text_div_id').width();
var h = $('#text_div_id').height();

$('#tinymce_instance_id').css({ 'position': 'absolute', 
                                'top': pos.top, 
                                'left': pos.left, 
                                'width': w + 'px',
                                'height': h + 'px' });

I think this should work, but haven't used TinyMCE for a while.