TinyMCE在fancyBox弹出窗口中不起作用

Question

If I open my textarea field inside a fancyBox window inline like so:

<a href="#someId" class="fancybox">Edit</a>

text doesn't want to be displayed inside TinyMCE plugin I use. Text is already inside those textareas but it is greyed out if I look in the console and the TinyMCE plugin is unresponsive. Pic: here. I understand I need to initialize TinyMCE inside popup window but I don't know how?

I already initialized TinyMCE for all textareas and I initialized fancyBox in my script but thats it.

Answer 1

You want to initialize TinyMCE when the content of the popup is loaded. So what you want is to look in the Fancybox documentation and look for callback-functions.

A callback function is a function that is triggered when a specific event occurrs.

In the documentation ( http://fancybox.net/api ) you will find there is an onComplete callback: "Will be called once the content is displayed".

So I think this should work:

$(document).ready(function() {

    $("a.fancybox").fancybox({
        'onComplete': function(){
            alert('place your tinymce init code here');
        }
    });

});

Here we define an anomynous callback function for the onComplete event of "a.fancybox". In this function you can place you tinyMCE init stuff.

Note that you might have to do some more coding, because you probably want to load TinyMCE only the first time the overlay is opened. The second time it is already loaded and you don't want to initialize TinyMCE again.