One instance of tinyMCE, moved between multiple text-areas?

Question

Hi everyone.

Using tinyMCE jquery version.

I have a content page where there could be many pieces of text which are clickable. So when a user clicks on one of these elements, we want to replace the DIV with the text with a tinyMCE instance containing the text.

So originally, I had it calling

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

and that was on the onclick of the div. But that of course is very clunky, as it will do an ajax request etc. and get tinymce again and again each time something is clicked. So instead, I want to initialise one tinyMCE instance on page load, and then onclick, just set the active textarea to be my already loaded tinyMCE instance. I can't seem to figure out how to do that with the jquery tinymce version. Is this possible? Any suggestions?

Answer 1

Hmm... perhaps absolutely positioning the TinyMCE editor, then moving it to match the position and height of the text 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 that should work, haven't used TinyMCE for a while though.

Answer 2

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

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

Answer 3

for me,

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

didn't work, so this is what worked for me:

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