Manager obrazków w TinyMCE

Większość osób pracujących z jakimś (lub nad jakimś) CMS’em spotkała się zapewne z edytoreym 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. Co chciałem osiągnąć?

Zmiana tego:

Na to:

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);
}

Udostępnij

Komentarze

Dodaj komentarz

Powiadom o
avatar
Adam K
Gość
Adam K

Bardzo fajna wypowiedź. Zakupiłem już programik, który polecasz. Jest lekki i łatwy w obsłudze. Modyfikując go o tą część, którą podałeś staje się jeszcze bardziej użyteczny. Muszę jeszcze tylko pokombinować jak przechwycić zdarzenia typu Drag&Drop bezpośrednio do TinyMCE. Z tego co czytałem to HTML5 wspiera już tego typu zdarzenia.

Serdecznie pozdrawiam

artur
Gość
artur

Dziękuję, że spodobał ci się ten artykuł.

wpDiscuz

Oferta

Katalog stron na sterydach
Front-end – jeden z dostępnych szablonów
Front-end – jeden z dostępnych szablonów
Panel administracyjny
Panel administracyjny
Panel administracyjny
Panel administracyjny – motyw 2
Panel administracyjny – motyw 1
  • Błyskawicznie zbudujesz potężne zaplecze
  • Niepowtarzalny wygląd wyróżni Twój skrypt
  • Motywy graficzne zmienisz jednym kliknięciem
  • Funkcje usprawniające pozycjonowanie i obsługę
Czytaj więcej...