Instalacja moduu CKeditor - WYSIWYG1

Chcc opublikowa now stron naley z gwnego menu wybra Dodaj zawarto. Masz do wyboru dwie moliwoci utworzenia nowych wpisw na swojej stronie. Wybierz Page. Na ekranie pojawi si kilka pl, ktre naley wypeni rysunek 1.

Rysunek 1: pola formularza tworzcego now stron w Drupalu

Pole Title: to miejsce gdzie mona wprowadzi tytu strony, za pole Body: to obszar gdzie moesz wprowadzi zawarto strony. Aby atwo otrzyma kilka akapitw niesformatowanego tekstu moesz skorzysta z darmowego generatora tekstu adres: http://pl.lipsum.com/feed/html. Wystarczy skopiowa wygenerowany losowo tekst i wklei w pole Body: na swojej stronie rysunek 2.

Rysunek 2: generator tekstu Loren Ipsum

Proces publikacji naley jeszcze poprzedzi rozwiniciem pola Menu. Pojawi si pole formularza, ktre umoliwia podanie nazwy linku pod ktrym bdzie zapisana nasza strona. Na dole ekranu znajduje si przycisk Zapisz uyj go w celu publikacji strony. Na rysunku 3. mona dostrzec link Moja strona, ktry umoliwia przegldanie zawartoci utworzonej strony.

http://pl.wikipedia.org/wiki/WYSIWYG, 10-03-2012r.

Rysunek 3: widok strony o tytule: Moja pierwsza strona

Tak opublikowana strona jest mao atrakcyjna. Tekst nie posiada adnych atrybutw. Na stronie nie ma rwnie takich elementw jak tabela, czy tez grafika. Co w takim wypadku zrobi? Jednym z rozwiza jest instalacja moduu, ktry zintegruje z Drupalem zewntrzne oprogramowanie WYSIWG. Jednym z lepszych jest cigle rozwijany i oparty na licencji Open Source program CKEditor. Mona go pobra ze strony http://ckeditor.com/ - rysunek 4.

Rysunek 4: edytor WYSIWG CKeditor

Pobierz najnowsz wersj programu CKEditor i rozpakuj go w uprzednio utworzonym folderze program. Aby pobrany program mg prawidowo dziaa w Drupalu naley pobra i zainstalowa odpowiedni modu. W tym celu otwrz stron http://drupal.org i odszukaj najnowsz wersj moduu ckeditor (http://drupal.org/project/ckeditor) rysunek 5. Pobrany plik zapisz i rozpakuj w uprzednio utworzonym folderze modul.

Rysunek 5: modu ckeditor w wersji zgodnej do zainstalowanego Drupala

Naley pamita, e wikszo moduw posiada instrukcj opisujc proces instalacji danego moduu. W tym przypadku instrukcja znajduje si w pliku README.txt.

Postpujc zgodnie z instrukcj naley skopiowa cay katalog programu CKEditor do wntrza katalogu moduu ckeditor rysunek 6.

Rysunek 6: kopiowanie programu ckeditor do wntrza moduu ckeditor

Pamitaj, e w module ckeditor istnieje ju katalog ckeditor i tam wanie musz si znale wszystkie pliki moduu ckeditor. Poniej znajduje si widok katalogu ckeditor w module ckeditor po skopiowaniu zawartoci programu rysunek 7.

Rysunek 7: wntrze katalogu ckeditor moduu ckeditor

Tak przygotowany modu, wraz z zawartoci programu, skopiuj do katalogu modules Twojej strony (C:\Program Files\VertrigoServ\www\mojefoto\modules). Teraz moesz zalogowa si do swojej strony i uaktywni modu ckeditor. Wejd do Zarzdzaj, a nastpnie w sekcji Budowa witryny kliknij na link Moduy. Na dole listy moduw pojawi si nieaktywny modu CKEditor rysunek 8.

Rysunek 8: nieaktywny modu CKEditor

Wcz modu i Zapisz konfiguracj. 3

Po wczeniu moduu jest on aktywny. Co prawda mona go konfigurowa dostosowujc do swoich potrzeb jednak ustawienia domylne pozwalaj ju z niego korzysta. Utwrz now stron. Z gwnego menu (po lewej stronie) wybierz link Dodaj zawarto. Nastpnie utwrz stron typu Page. Na ekranie zobaczysz znany Tobie formularz uzupeniony o ikony pochodzce od CKEditor. rysunek 9.

Rysunek 9: zestaw domylny ikon dla uytkownika uwierzytelnionego w serwisie

Utwrz dowolny wpis. Korzystajc z ikon sformatuj tekst. Na kocu dokumentu umie emotikonki. Uzupenij pole Title oraz Menu, opublikuj stron. Mimo, i projekt zosta przez nas sformatowany okazuje si, e nie wszystkie elementy formatowania nie s widoczne na stronie (nie ma emotikonek). Drupal domylnie ma wczony filtr HTML. Oznacza to, e tylko niektre znaczniki HTML bd wywietlane na stronie - jest to zwizane z moliwoci komentowania naszych artykuw przez internautw. Aby wszystkie znaczniki byy wywietlone naley wczy opcj Full HTML. W tym celu wejd do edycji strony i rozwi menu Format wprowadzania (tu pod oknem Body) rysunek 10.

Rysunek 10: zmieniona formatu wprowadzania danych na Full HTML

Po zmianie formatu wprowadzania danych zatwierd przyciskiem Zapisz. wiczenie 1: Utwrz stron na dowolny temat. Umie grafik zwizan z tematem strony. Na dole strony podaj rdo (skd brany by tekst oraz grafika). Uwaga: aby istniaa moliwo wgrania plikw na stron Drupal. naley uaktywni modu Upload.

Ciga zmiana formatu wprowadzania danych moe by uciliwa. Istnieje moliwo zmiany ustawie domylnych Drupala. Wejd do menu Zarzdzaj, a nastpnie odszukaj link Formaty danych rysunek 11.

Rysunek 11: zmiana domylnego formatu danych

Po zmianie domylnego formatu wprowadzania danych wszystkie znaczniki HTML bd prawidowo interpretowane i wywietlane na stronie. Istnieje rwnie moliwo osadzenia kodu PHP wewntrz HTML uaktywnij modu PHP filter. wiczenie 2: Samodzielnie zainstaluj modu .