Manager obrazków w TinyMCE

Większość osób pracujących z jakimś (lub nad jakimś) CMS’em spotkała się zapewne z edytorem TinyMCE. Jest to świetny edytor, którego jednakże tu opisywać nie zamierzam (polecam przetestowanie demo na stronie autora). Przy pracy z tym edytorem (tak, czasem korzystam z edytorów WYSIWYG, choćby pisząc ten artykuł), brakowało mi jednego: możliwości przesłania grafiki na serwer i osadzenia jej w treści artykułu. Grafikę można co prawda zamieścić linkując do pliku z grafiką, lecz jak dla mnie nie jest to wygodne rozwiązanie. Można zakupić potężny skrypt MoxieManager ale cena €75 na jedną domenę, zwłaszcza przy sporadycznym używaniu, to zbędny wydatek.

Zaglądając na CodeCanyon trafiłem na idealne jak na moje potrzeby rozwiązanie – plugin TinyMCE 4 Image Manager. Prosta w instalacji i konfiguracji (wystarczy wrzucić ją do folderu z wtyczkami TinyMCE i ustawić ścieżki do folderów uploadowanych plików). Wtyczka umożliwia m.in. przesłanie plików (także drag & drop) do ustalonego katalogu (również podkatalogów), zmianę nazw plikom i podkatalogom, skalowanie grafik, podgląd miniatur. Wtyczka po ostatniej aktualizacji sprawuje się wyśmienicie, autor robertnduati oferuje wsparcie (szybka odpowiedź na zauważone błędy – patch wysłany mailem na drugi dzień). Do tego cena 9$, to znaczna oszczędność.

W opisywanej wtyczce brakowało mi tylko banalnej rzeczy: nazw plików przy miniaturach (przy większej ilości podobnych grafik ciężko wyłuskać właściwą). W tym celu pozwoliłem sobie na małą modyfikację, którą przedstawię poniżej. Na poniższych screenach zobacz różnicę między standardową wersją wtyczki, a zmodyfikowaną:

tinymce4im_before_big

tinymce4im_after_big

W pliku image/contents.php odszukaj wiersz:

<div class="clearfix"></div>

Dodaj pod każdym znalezionym wierszem (powinny występować 2 razy) kod:

<div class="item-name">'.$c['name'].'</div>

W pliku image/image.php odszukaj:

<style>
.library-item div.item{
	margin: 9px;
	display: block;
	float: left;
	width: 130px;
	height: 108px;
	margin-bottom: 12px;
	margin-right: 27px;
}

...

</style>

Dodaj poniżej:

.library-item div.item div.item-name{
	position: absolute;
	width: 130px;
	margin-top: -115px;
	margin-left: 5px;
	font-size: 9px;
	line-height: 130%;
	overflow: hidden;
	color: #6F6F6F;
	background-color: rgba(255,255,255,.8);
}

I to wszytko. Dzięki jednej drobnej zmianie otrzymaliśmy nieco wygodniejszy interfejs zarządzania obrazkami w TinyMCE.

Info: Masz jakieś pytania? Chciałbyś coś dodać do tego artykułu, czy też zauważyłeś jakieś błędy? Zostaw komentarz, a postaram się odpowiedzieć.