W temacie dotyczącym porównania obu edytorów, przestawiłem różnice oraz pokazałem jak wyglądają. Wspomniałem na końcu, że kolejny temat, będzie dotyczyć konfiguracji obu edytorów oraz integracji pluginu KCfinder, darmowego rozszerzenia ładowania zdjęć do swoich tekstów.
W tym temacie omówię, tylko konfigurację obu edytorów a w kolejnym instalacje rozszerzenia KCFinder.
Zacznę od instalacji CKEditora.Nie muszę pisać, ale zakładam, że wybrałeś odpowiednią wersję CKeditora z tej strony https://ckeditor.com/ckeditor-4/download/ z trzech możliwych wersji:
Następnie, pobierz i wypakuj do swojego katalogu, w którym ma działać strona z edytorem. Po rozpakowaniu, będziesz miał różne katalogi oraz luzem dwa pliki: ckeditor.js i config.js, na razie nigdzie nie umieszczaj i upewnij się, że będzie Ci działać. U mnie tak wyglądają katalogi po rozpakowaniu:
Aby można było ujrzeć rezultat, wystarczy, że twój kod, będzie tak wyglądać.
Zauważ, że na górze ramach head jest dodany plik ckeditor.js. Jest to ścieżka do pliku, bez niego nie zadziała edytor, będzie samo pole textarea. Jak zauważyłeś, name w textarea jak i CKEDITOR.replace('editor1'), mają taką samą nazwę. Jeżeli wszystko przebiegło tak jak ja mam, to edytor powinien działać. Wygląd już pokazałem we wcześniejszym temacie, więc pominę dodawanie ponownego zrzutu edytora.
Oprócz plików ckeditor.js i config.js, też jest ważny plik build-config.js, jednak w tym pliku nic się nie zmienia a jak już mamy skonfigurować i dodawać dodatkowe pluginy, to konfigurujemy w pliku config.js.
Czas na instalację edytora TinyMCE
Tu również zakładam, że pobrałeś odpowiednią wersję i rozpakowałeś do katalogu, w którym będzie działać edytor. Po rozpakowaniu powinieneś mieć takie pliki:
Mój edytor jest akurat w pliku dodaj.php i bez znaczenia jest, czy w index.php, czy w innym pliku, będzie kod edytora.
U mnie plik dodaj.php (fragment, gdzie jest kod odpowiadający za działanie edytora) wygląda tak:
I to już wszystko, żadnego kodu w atrybutach textarea nie dodajesz! Pamiętaj, aby było id="textarea" w linii po name. I nie zapomnij dodać linijki w ramach <head></head>, która odnosi się do skryptu obsługującego edytor:
Na powyższym obrazku jest pokazany fragment kodu odpowiadający za działanie kcfindera, który jest bezpłatnym dodatkiem do obu edytorów. A teraz pokażę sam kod odpowiadający za kcfinder:
<script src='js/tinymce/tinymce.js'></script>
Dlatego, nie martw się, że u mnie jest więcej kodu, ale ten kod jak i nad nim zrzut, będzie ponownie pokazany, gdy będzie omawiana instalacja tego darmowego dodatku do tych edytorów.
I to wszystko, otwórz stronę i zobacz, czy działa. Jak nie działa, to znaczy, że coś przeoczyłeś.
Następny temat to omówienie KCFinder w obu edytorach.
Następny temat to omówienie KCFinder w obu edytorach.