TinyMce with Facebox

Question

I am having some problem using tinymce on a textbox inside a Facebox modal popup. I am trying to go something like the following-

• There is a parent page in which I am loading the tinymce.min.js javascript file and also doing tinyMCE.init().
• There is a button on the parent page and on the click of the button, I have a javascript function being invoked makes an ajax call and displays the return html from the ajax call in a facebox.
• There is a textbox in the return HTML from the ajax call which I need to be tinyMCEd.
• I have a registered event handler which has binded to the event afterReveal.facebox - which from the documentation looks like is called after the facebox has been rendered (though the doc isn't very clear)

• In the above event handler, I have the following code -

  tinyMCE.execCommand('mceAddControl', true, 'new-outline')

new-outline is the id of the textarea which needs to be tinyMCEd.

I am not getting any JS errors and the textarea turns to be tinymce editor. However, the editor jumps out the facebox (to the right) and only a portion of the editor is visible.

If I do not make it tiny mce, then the textarea is rendered properly inside the facebox.

How can I correct this?

Answer 1

I was facing the problem because of some styling issues in my CSS. The method which I've described is the best way to achieve this if you want to do something like this.

Answer 2

Best will be to show us your complete init configuration for your tinymce. If the editor does not show up and you get no javascript error using your developer console, it is very likely that your tinymce configuration is errounous.

Answer 3

Make sure following line is present in your facebox.js

reveal: function(data, klass) {
      $(document).trigger('beforeReveal.facebox')
      if (klass) $('#facebox .content').addClass(klass)
      $('#facebox .content').empty().append(data)
      $('#facebox .popup').children().fadeIn('normal')
      $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2))
      // Below Line 
      $(document).trigger('reveal.facebox').trigger('afterReveal.facebox'); // This Line
    }

And your facebox pop up page, you have to use following code.

$(document).bind('afterReveal.facebox', function() {
    tinyMCE.execCommand('mceAddControl', true, 'content');
    // Here 'content' is editor (textarea) id
});

Note : Do not need to init tinyMCE config in your facebox pop up.