TinyMCE & Fancybox - editor won't work on second view

Question

I\'ve added TinyMCE to my project, and am using it on a text area which pops up in a fancybox. The first time I action it, it works fine, but if I then close it and try to

Answer 1

I'm using fancybox 2.0

$("#notesbtn").fancybox({ 
    beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'elm1'); },
    beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'elm1'); }
});

Answer 2

this work for me for fancybox 2.1.5 I guess

$(".fancybox").fancybox({
    afterLoad: function () {
        tinymce.remove();
        setTimeout(function(){tinymce.init({selector:'textarea'});},500);
    }
});

Answer 3

You need to shut down tinymce correctly before closing the fancybox in order to be able to open the tinymce editor a second time. Use this to shut it down correctly

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);

Answer 4

user this code from jquery.tinymce.js:

'onComplete': function() {
    $('textarea.tinymce').tinymce({
        ...
    })
    ...

Answer 5

For tinyMCE 4.X Add tinyMCE.remove() in your fancybox beforeClose callback:

beforeClose : function() {
  tinyMCE.remove();
}

see: Remove TinyMCE control and re-add

Answer 6

I had this same problem in a project that I've been working on for a while now, and I tried a couple different ways to fix it over the last couple months, but yesterday I finally was able to address it in a manner that seems to be working well.

The key, is that instead of using the jQuery driven version of TinyMCE, you need to use the normal javascript version, with the mode configuration option set to none. This should be initialized as soon as the page loads (instead of at the time when you want to load the TinyMCE in, as you are doing in your example). Then, similar to the technique suggested in @user1116745's answer, you use FancyBox's callbacks to initialize the TinyMCE, once the FancyBox has finished loading like so:

(this assumes that your text area has an id of text_form)

$(function(){
  $('#content_objects_edit').fancybox({
    onComplete: function () { tinyMCE.execCommand('mceAddControl', false, 'text_form'); },
    onCleanup: function () {
      tinyMCE.execCommand('mceFocus', false, 'text_form');
      tinyMCE.execCommand('mceRemoveControl', false, 'text_form');
    }
  });
})

As taken from FancyBox's API, here are when these two callbacks fire:

onComplete - Will be called once the content is displayed

onCleanup - Will be called just before closing

For more information on what the tinyMCE.execCommand does, see the docs. Essentially it converts a textarea to a tinyMCE instance on the spot.

This did the trick for me. Haven't had any problems with the grayed out screen you mention since I implemented this method.