While designing new layout for on of the features. Our designer had an idea to replace boring TinyMCE popups with awesome fancybox solution. Well easier said than done Smile. From technical point of view it was quite a task.

Before doing the changes we need :

1. fancybox script

2. inlinepopups plugin

InlinePopups has to be activated on editor init function. This plugin will force popups to show as a separate element on the page instead of new window, which is a default action

 

image

Changes to the inline popups editor_plugin.js

 

After this simple change default popup will be replaced with fancybox.

image

TinyMCE Popup inside fancyBox

 

There is one problem with this solution. Out of box if you have inline popups plugin you can run multiple popups ,like one popup for file browser and another for custom image browser. With changes inside inline popups that supports fancybox you are not able to open two popups because fancybox doesn’t support multiple instances running in the same time. One of the solutions would involve opening first fancy back after closing second fancy.