Edytor cheditor WYSIWYG z uploadem zdjęć.

Autor:
Doktor Problem
Opublikowany:
Kategorie:
Informatyka
Tagi:


Nie dawno zostałem poproszony o zintegrowanie z systemem CMS jakiegoś prostego edytora tekstu z możliwością ładowania plików na serwer. Zastanawiałem się nad CKEditor i TinyMCE. Sprawdziłem oba i bardziej do gustu przypadł mi Ckeditor

. Trochę się namęczyłem zanim udało mi się doprowadzić zadanie do końca. Dla tego postanowiłem udostępnić gotowy pakiet edytora WYSIWYG CKEditor z menadżerem plików Kcfinder aby zaoszczędzić innym trochę czasu. (z czasem wersja może być trochę stara, można pobrać ckeditora i Kcfinder oddzielnie)

Edytor WYSIWYG Ckeditor Ckeditor wybranie upload zdjęcia Ckeditor wybranie upload zdjęcia Kcfinder menadżer uplad zdjęć

Jest to gotowy pakiet edytora CKeditor z dodanym menadżerem plików i ładowaniem zdjęć za pomocą plugina Kcfinder. Wszystko zostało skonfigurowane do pracy. Jeżeli po wysłaniu pliku skrypt zatrzymuje się na szarym boksie to znaczy że ścieżka do menadżera Kcfinder jest błędna i trzeba ją dostosować do sytuacji na naszym serwerze.

W pliku konfiguracyjnym CKeditor (ckeditor_Kcfinderconfig.js) trzeba zmodyfikować linie

config.filebrowserBrowseUrl = 'tutaj wpisz ścieżkę do pliku kcfinder/browse.php';
config.filebrowserUploadUrl = 'tutaj wpisz ścieżkę do pliku kcfinder/upload.php';

Dla przykładu na jednej z stron gdzie trzymam CKeditor w katalogu /js/Ckeditor z wieloma podkatalogami i wersjami językowymi strony aby upload plików działał poprawnie musiałem ustawić takie ścieżki:

config.filebrowserBrowseUrl = '../../js/ckeditor/kcfinder/browse.php';
config.filebrowserUploadUrl = '../../js/ckeditor/kcfinder/upload.php';

Kcfinder domyślnie skonfigurowany jest tak aby pliki wysłane pliki zostawiać w katalogu ckeditorkcfinderuploadfiles Aby zmienić katalog pobranych plików musimy edytować plik ckeditorkcfinderconfig.php

W linii 28 możemy zmienić adres URL obrazka który będzie nam się wyświetlał
'uploadURL' => "upload",
W linii 29 ustawiamy fizyczną lokalizację obrazka
'uploadDir' => "files",

Przykład. Uploader plików Kcfinder mam w katalogu /js/ckeditor. A zdjęcia trzymam w /images/files
Linie 28 i 29 zedytowałem tak:
'uploadURL' => "../../../images",
'uploadDir' => "",

Edytor cheditor WYSIWYG z uploadem zdjęć.
Oceń ten artykuł

Frazy wpisywane w wyszukiwarkach aby znaleźć ten artykuł:
| | |

  1. Krzys pisze:

    Gdzie można zmodyfikować ikonki, bo nie mogę odnaleźć pliku z konfiguracją?

  2. fiwus pisze:

    Wyjaśniłeś mi wszystko 🙂 dziekuję!

  3. Kamil pisze:

    Dzięęęęęki, siedziałem nad tym kilka godzin i dopiero dzięki Tobie wszystko mi działa 🙂

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Nazwa *
E-mail *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Przeczytaj poprzedni wpis:
Motywacja w pracy informatyka

Motywacja w pracy Jak wiele zawodów umysłowych, zawód informatyka wymaga odpowiedniej koncentracji i świeżości umysłowej. Przy ciągłej pracy łatwo o...

Zamknij