TinyMCE : popup z paskami przewijania i na pełen ekran

Więc masz własną stronę dla popup-u w TinyMCE? Powiedzmy do wstawiania obrazku? Cokolwiek to jest zawartość może być większa niż zdefiniowana wysokość lub szerokość popup-u. Gdzie do jasnej ciasnej podziały się paski przewijania (scrollbars)?

Poniższe instrukcje oparte są o TinyMCE w wersji:

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

Większość z nas, pierwsze kroki kieruje do pliku CSS i do czegoś a’la – overflow:auto. Błąd. To nie to. Nadal nie ma pasków przewijania.

Ale aha! W źródle jest coś takiego jak windowManager.open wykorzystywane do otwierania popup-u. W zasadzie jest to, to samo co metoda window.open(). Sprawdźmy więc jaka jest dla niej składnia np w w3schools. Mamy coś takiego:

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

Naprawdę? Takie proste?

Więc jeśli nie masz pasków przewijania w swoich popupach, a chcesz żeby były, znajdź linię odpowiedzialną za otwarcie twojego popup-a. Dla przykładu wstawiania obrazka znajduje się ona w pliku /tinymce/themes/advanced/editor_template.js.

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},

Na końcu, ale zaraz przed } wstaw – scrollbars:true, Powinnno to wyglądać mniej więcej tak:

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},

Dla mojego przykładu, podobna linia (tylko zamiast i. mamy a. w źródle) musi zostać zmieniona w pliku /tinymce/plugins/advimage/editor_plugin.js

Po tych zmianach paski przewijania powinny się pojawić.

Co jeśli chcemy żeby nie tylko paski się pojawiały w naszym popupie, ale oprócz tego, aby otwierał się na cały ekran? Ponownie sprawdźmy składnie.

“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”

Tylko IE? Tego nie wiem dokładnie, ale żeby mieć pewność możemy sprawdzić rozdzielczość ekranu i przypisać ją do wysokości i szerokości. Tak więc ostatecznie mój przykład z paskami przewijania i pełnym ekranem wygląda tak:

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