Question

I would like the fullscreen plugin to open a wysiwyg popup to certain dimensions. Is that possible?

I currently have this:

        $(function () {
            $("textarea.tinymce").tinymce({
                script_url: '/scripts/tiny_mce/tiny_mce.js',
                mode: "textareas",
                theme: 'advanced',
                plugins: 'fullscreen',
                theme_advanced_toolbar_location: "top",
                theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,undo,redo,|,bullist,numlist,fullscreen",
                theme_advanced_buttons2: "",
                theme_advanced_buttons3: "",
                theme_advanced_buttons4: "",
                invalid_elements : "img,input,table,a",
                fullscreen_settings : {
                    width : "640",
                    height : "480"
                },
...

which does open the popup in a new window, adding width and height to table “mce_fullscreen_tbl” and makes the wysiwyg appear in the top/left corner. I would like for the wysiwyg to be in the center of the page.

Is there a fullscreen_callback option? this way i could add “mce_fullscreen_tbl.margin: auto’…but not to sure about it.
thanks

Answer 1

We solved it by using our own custom css to specify the margins on the mce_fullscreen_tbl element. As an extra feature we added a lightbox effext so that you can see the editor floating above the grayed out page underneath.

Paste this snippet into your own css that is included in the same page where you use TinyMCE.

#mce_fullscreen_container { 
  background:none; 
  background: rgba(0, 0, 0, 0.6);    
  -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); 
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); 
  zoom: 1; 
} 

table#mce_fullscreen_tbl.mceLayout { 
  margin: 20px auto 0; 
}