Wprowadzaj i zmieniaj tekst na stronie WWW "jak w Wordzie"

WYSIWYG w Drupalu 7

prezentujący:Tomasz Rychter

Programista serwisów internetowych

Agenda

- Co to jest WYSIWYG, czy to mi się przyda?

- Moduł WYSIWYG w Drupalu

- Wybór i instalacja edytora WYSIWYG

- Konfiguracja edytora WYSIWYG

- Korzystanie z edytora WYSIWYG

- Przydatny dodatek – moduł IMCE

- Instalacja modułu IMCE

- Co jeszcze można dodać?

- Podsumowanie

Co to jest WYSIWYG, czy to mi się przyda?

WYSIWYG (czyt. ły – zi - łyg :) ) ang. What You See Is What You Get – akronim stosowany w informatyce dla określenia metod, które pozwalają uzyskać wynik w publikacji identyczny lub bardzo zbliżony do obrazu na ekranie. (źródło: Wikipedia)

- jeden z powodów rosnącej popularności wszelkich CMSów – nie trzeba znać HTMLa, żeby wprowadzać i formatować tekst na stronie WWW

- umożliwia ograniczenie dostępu do z góry zdefiniowanej grupy znaczników HTML – laik / złośliwiec nie wstawi nam znaczników, które mogą „zepsuć” wygląd naszej strony

WYSIWYG – instalacja modułu

Zadanie 1.

Włącz moduł WYSIWYG

Potrzebujemy:● http://www.drupalidzienastudia.pl/sites/default/files/wysiwyg-patched.tar.gz

UWAGA: powyższa wersja ma nałożony PATCH, który potrzebny jest do poprawnego rozpoznawania edytora CKeditor w wersji 4.x

Prawdopodobnie niedługo pojawi się kolejna wersja modułu, który nie będzie wymagał osobnego nakładania patcha (http://drupal.org/project/wysiwyg)

WYSIWYG – instalacja edytora WYSIWYG

Moduł WYSIWYG to „tylko” opakowanie, potrzebujemy jeszcze edytora WYSIWYG!

Jaki edytor wybrać?

- taki, który będzie umieszczony w standardowej konfiguracji Drupala 8 (http://buytaert.net/from-aloha-to-ckeditor)

- dobry, bo z Polski! ;) (http://cksource.com/team)

WYSIWYG – instalacja edytora WYSIWYG

WYSIWYG – instalacja edytora WYSIWYG

Zadanie 2.

Zainstaluj edytor WYSIWYG, wybierz go jako domyślny edytor dla wszystkich rodzajów zawartości.

Potrzebujemy:● http://ckeditor.com/download

UWAGA: należy pobrać wersję FULL, inaczej może brakować części ikon● (na wszelki wypadek: http://www.drupalidzienastudia.pl/sites/default/files/ckeditor-full.tar.gz)

WYSIWYG – instalacja edytora WYSIWYG

WYSIWYG – konfiguracja edytora WYSIWYG

Jeśli zapomnisz przypisać edytor do danego rodzaju zawartości, będzie to wyglądać tak:

WYSIWYG – konfiguracja edytora WYSIWYG

Zadanie 3.Skonfiguruj edytor dla wybranego rodzaju treści.

WYSIWYG – konfiguracja edytora WYSIWYG

WYSIWYG – korzystanie z edytora WYSIWYG

Zadanie 3.Sprawdź kod źródłowy po wklejeniu treści z bogatego edytora tekstu (np. LibreOffice Writer) na każdy z trzech sposobów.

WYSIWYG – korzystanie z edytora WYSIWYG

Bogaty edytor tekstu – bogate źródło:

WYSIWYG – korzystanie z edytora WYSIWYG

Ten sam tekst, wklejony za pomocą – Wklej z Worda:

WYSIWYG – korzystanie z edytora WYSIWYG

Ten sam tekst, wklejony za pomocą – Wklej tekst:

WYSIWYG – korzystanie z edytora WYSIWYG

Wstawianie i edycja linków:

IMCE – moduł do zarządzania plikami

IMCE to niezależny moduł, pozwala zarządzać plikami nie tylko z poziomu edytora WYSIWYG

IMCE – konfiguracja modułu

IMCE – połączenie z edytorem WYSIWYG

IMCE – połączenie z edytorem WYSIWYG

WYSIWYG – dodatki

Pluginy do modułu WYSIWYG

http://drupal.org/node/1197256

1) drupalowe

2) natywne - działają tylko z konkretnym edytorem WYSIWYG

Zadanie domowe:Pobrać i skonfigurować jeden plugin drupalowy i jeden natywny

WYSIWYG – Podsumowanie

➔ WYSIWYG bardzo usprawnia pracę z treścią na stronie WWW

➔ Przy bardziej złożonych tekstach warto regularnie kontrolować generowany przez edytor kod korzystając z podglądu źródła

➔ Najczęstszy błąd: próba umieszczenia obrazków, bogatego formatowania tekstu dla formatu tekstu Filtered HTML

Dziękuję za uwagętomasz . rychter {na| mediaregionalne. pl