TinyMCE : popup with scrollbars and fullscreen

So, you’ve got your own page for popup in TinyMCE? Let say for inserting an image? Whatever that is, content is bigger than specified width or height of popup? Where the heck are scrollbars? ;o)

Following instructions are based on TinyMCE:

majorVersion : ‘3’,
minorVersion : ‘3.9.2’,
releaseDate : ‘2010-09-29’,

For most of us, first steps would be CSS file and something like – overflow:auto. Err, wrong. That’s not it. Still no scrollbars.

But, A-ha! In source there is something like windowManager.open used for opening popups. Which is basicaly same as window.open() method. Soo let’s see syntax for that in w3schools. We’ve got:

“scrollbars=yes|no|1|0 – Whether or not to display scroll bars. Default is yes”.

Really? So simple? Yep. 

So if you don’t have scrollbars in your popups and you want them, find the line responsible for opening your popup – for image example it is in /tinymce/themes/advanced/editor_template.js file:

i.windowManager.open({url:this.url+'/image.htm',
width:355+parseInt(i.getLang('advanced.image_delta_width',0)),
height:275+parseInt(i.getLang('advanced.image_delta_height',0)),
inline:true},

and add at the end but before } – scrollbars:true, so it should look like this:

i.windowManager.open({url:this.url+'/image.htm',
width:355+parseInt(i.getLang('advanced.image_delta_width',0)),
height:275+parseInt(i.getLang('advanced.image_delta_height',0)),
inline:true,scrollbars:true},

For my example with popup image, similar line (but instead of  i. we’ve got a. in source) needs to be change in /tinymce/plugins/advimage/editor_plugin.js file.

After these changes scrollbars should appear. 

But what if we want not only scrollbars but also a maximize popup. Again, lets go see syntax. We have got something like: 

“fullscreen=yes|no|1|0 – Whether or not to display the browser in full-screen mode. Default is no. A window in full-screen mode must also be in theater mode. IE only”

IE only? I don’t know about that, but to be sure we can measure resolution and assign it to our width and height. So finally example for image popup with scrollbars and fullscreen mode would be like that:

i.windowManager.open({url:this.url+'/image.htm’,
width:screen.width,
height:screen.height,
inline:true,scrollbars:true,fullscreen:yes}