Na blogu pisałem o edytorach CKEditor i TinyMCE, pokazując zrzuty kodu danego edytora. Czas na zaimplementowanie KCFinder do ładowania mediów np: zdjęć.
KCFinder był pierwszym pluginem do edytora CKEditor. Owszem są inne rozwiązania (lepsze) np:CKFinder, który jest dodatkiem płatnym, choć wersja free umożliwia korzystanie bez opłat tylko dla jednego użytkownika. Są jeszcze inne managery ładowania mediów.
KCFinder można było pobrać ze strony http://kcfinder.sunhater.com/download. Obecnie strona nie istnieje, ale dla przypomnienia, jak wyglądała, to dam wcześniejszy rzut strony, który kiedyś wykonałem, gdy strona działała.
 |
| strona Sunhater - KCFinder |
I z takiej strony można było pobrać, odpowiednią wersję dla edytora CKEditor lub dla TinyMCE. Obecnie KCFinder można pobrać z tej strony: https://sourceforge.net/projects/kcfinder/.
Zacznijmy od tego, jak zaimplementować w edytorach CKEditor i w TinyMCE. Zakładam, że pobrałeś i rozpakowałeś, a następnie przeniosłeś katalog kcfinder w miejsce, gdzie masz już swój edytor na stronie (czyli działa wybrany edytor).
Jak nie wiesz o czym piszę, to na blogu pisałem o obu wspomnianych edytorach, i jest tam zrzut, gdzie znajduje się katalog kcfinder.
Implementacja KCFinder w edytorze CKEditor
Wejdź w katalog CKEditor i wybierz config.php. Jeżeli otworzyłeś dowolnym edytorem plik config.php, to teraz wystarczy wkleić (u mnie przepisać!) następujące linijki kodu:
Zapisz i możesz zamknąć, ale jedna uwaga, ten kod musi być w:
CKEDITOR.editorConfig = function( config ) {
Tu znajdują się linijki kodu, i nie tylko linijki odpowiadające za kcfinder, ale też za inne ustawienia edytora
}
Następnie wejdź w katalog KCFinder i otwórz plik config.php. Dla obu edytorów ustawienia są takie same, dlatego nie będę umieszczał dwa razy tych samych linijek kodu, choć mogą się różnić wg.swoich potrzeb. O to, co musisz zmienić. Patrz na zrzucie.
Domyślnie disabled jest ustawione na TRUE, zmień na FALSE. Dalej, musisz podać ścieżkę, gdzie mają się ładować zdjęcia. Możesz, ale nie musisz, dać nazwę dla okna, w którym będziesz mógł załadować zdjęcie. I tyle! Jak wcześniej napisałem, te ustawienia są takie same dla obu edytorów.
Implementacja KCFinder w edytorze TinyMCE
Robisz te same kroki, jakie wyżej napisałem przy implementacji KCFinder w CKEditor. W pliku config.php edytora TinyMCE ustawiasz to co jest wyżej. Natomiast, mając pod uwagę, że TinyMCE jest edytorem JS, wystarczy (zależnie od położenia pliku konfiguracyjnego) w ramach funkcji:
tinymce.init({
Wpisać ten oto fragment kodu:
});
Jak widać, jest tylko jedna linijka, która odpowiada za ładowanie pliku, reszta linijek, to dodatkowe ustawienia. Po zapisaniu powinno teraz działać ładowanie zdjęć do edytora.
Oprócz KCFinder i CKFindera jest inne rozszerzenie o nazwie file manager, niestety też jest płatny.
Dlatego dobrym wyjściem dla KCFinder i CKFinder, alternatywą może być Responsive file manager i można stąd pobrać: https://www.responsivefilemanager.com/ . Sam zaimplementowałem do CKEditora i w porównaniu z KCFinder dużo lepiej wygląda i ma więcej możliwości. Ale to już na osobny temat.