Integrujemy funkcje edycyjne WYSYWIG HTML-a z Systemem Zarządzania Treścią aplikacji do prowadzenia bloga lub internetowego sklepu za pomocą Spaw Editor 2.
Za pomocą Ajaksa, Asynchronicznego
JavaScriptu i XML-a aplikacje przenoszą
się do internetu. Mamy wspaniałe
przykłady w postaci interfejsu do Gmaila
oraz mającego pojawić się Photoshopa online
(który prawdopodobnie będzie kombinacją
Ajaksa i Flasha). Mamy też przykłady,
takie jak Spaw Editor 2 – edytor WYSIWYG
dla twórców stron.
Spaw wraz z wersjami PHP i ASP.NET jest
zaprojektowany jako zamiennik dla kontrolek
edycyjnych w CMS-ie, sklepie online lub aplikacji
do blogowania. Kontrolki dostarczają użytkownikom
środowiska podobnego do edytora
tekstu – wspaniałego w dodawaniu treści
do każdej strony.
Prócz aplikacji i strony do edycji, Spaw ma
też inne wymagania. Potrzebuje PHP4 oraz
PHP5, by można było uruchomić wersję opisywaną
w tym poradniku. Możemy uzyskać
do niego dostęp z poziomu IE w wersji 5 lub
wyższej, jakiejkolwiek przeglądarki opartej na
Gecko, w rodzaju Mozilli lub Firefoksa, mamy
też wsparcie dla Opery 9. Spaw jest rozpowszechniany
jako produkt bezpłatny dla niekomercyjnego
zastosowania, będziemy jednak
musieli kupić licencję na jego dystrybucję z komercyjnymi
skryptami.
Co budujemy
Zainstalujemy i przetestujemy podstawową wersję Spaw 2, zapoznając się
z oferowanymi funkcjami. Gdy już nad nim zapanujemy, nauczymy się jak wkomponować
go w istniejące strony PHP i edytować pliki. Wreszcie zintegrujemy Spaw
z prostym Systemem Zarządzania Treścią napisanym w PHP, by przekonać się,
jak współpracuje z innymi skryptami.
{tlo_1}
Krok 1. Instalujemy spaw
Rozpakowujemy archiwum Spaw (spaw-php-203-gpl.
zip) na swoim komputerze, następnie przechodzimy do
folderu {stala}/spaw2/config/{/stala}. Zmieniamy nazwę pliku config.
default.php na config.php. Następnie wgrywamy folder
spaw2 wraz z jego zawartością do głównego folderu
na naszym serwerze.
{/tlo}
{tlo_0}
Krok 2. Szybki test
Otwieramy przeglądarkę i przechodzimy do {stala}http://nasza_domena.com/spaw2/demo/demo.php{/stala}, by sprawdzić
czy oprogramowanie działa. Powinniśmy ujrzeć
demonstracyjną wersję Spaw Editora. Jeśli jej nie ma,
upewnijmy się, że załadowaliśmy na serwer skrypty
w trybie ASCII i że nasz serwer jest skonfigurowany do
działania z PHP 4+.
{/tlo}
{tlo_1}
Krok 3. Oglądamy demo
To nie jest demonstracja funkcji Spaw (raczej jesteśmy
zachęcani do odwiedzenia strony z wersją demonstracyjną
na Solmetrze), tak więc aby zobaczyć demo
w akcji, kliknijmy podany odnośnik. Prezentowaną wersję
Spaw Editora wyposażono w zakładki dla rozszerzonego
tekstu oraz tłumaczenie na litewski. Przydatne,
jeśli jesteśmy Litwinami.
{/tlo}
{tlo_0}
Krok 4. Bogactwo funkcji
Spaw wyposażono we wszystkie funkcje, których oczekiwalibyśmy
od edytora WYSIWIG, oraz kilka zaskakujących
dodatków. Przykładowo, możemy zmieniać rozmiar
okna, wystarczy kliknąć jego róg i pochwycić go,
by zmienić jego rozmiar. Główny pasek narzędzi można
skonfigurować w taki sposób, by był pływający.
{/tlo}
{tlo_1}
Krok 5. Czyszczenie HTML-a
Mamy tutaj również przyciski służące do dodawania obrazów, a nawet elementów Shockwave Flasha. Jest także
jeden przycisk do czyszczenia HTML-a oraz walidacji kodu, który jest przydatny, gdy pracujemy w trybie HTML.
{/tlo}
{tlo_0}
Krok 6. Podgląd projektu
Chociaż możemy wybrać kodowanie w HTML-u, podgląd
projektu umożliwia nam szybkie tworzenie layoutów
za pomocą tabel. Klikamy ikonę Create table
i w otwartym polu dialogowym możemy zdefiniować rozmiary
tabel oraz dodać je do aktywnego dokumentu.
{/tlo}
{tlo_1}
Krok 7. Prosta zmiana rozmiarów
Tabele, obrazy i obiekty to elementy, których rozmiary
można zmieniać dynamicznie. Naprowadzamy
wskaźnik myszy na którykolwiek element i wskazujemy
zmiany umożliwiające przenoszenie lub zmianę
rozmiarów. Klikając obiekt prawym klawiszem myszy
możemy uzyskać dostęp do menu, w którym wyświetlana
jest treść powiązana z danym elementem.
Za pomocą tabel możemy tworzyć nowe lub łączyć
istniejące komórki.
{/tlo}
{tlo_0}
Krok 8. Zarządzanie plikami
Zdecydowanie zabrakło jednego zestawu ikon – przycisków
służących do zarządzania plikami. Nie mamy tutaj
domyślnych przycisków służących do otwierania i zachowywania
plików ze względu na fakt, że Spaw ma być
zintegrowany z istniejącymi stronami. Jednak pokażę,
jak zbudować tego rodzaju funkcjonalność.
{/tlo}{tlo_1}
Krok 9. Prosty start
Na płytce w folderze spawtutorialfiles zamieszczono kolekcję
plików. Załadujemy plik spaw1.php do głównego
katalogu na serwerze, następnie połączmy się z adresem
{stala}http://nasza_domena.com/spaw1.php{/stala}. Powinniśmy ujrzeć
Spaw Editora, podobnie jak na stronie demo.
{/tlo}
{tlo_0}
Krok 10. Prosty przykład
Otwieramy oryginalny plik w edytorze tekstowym.
Rozpoczyna go deklaracja include, która odwołuje się
do głównego pliku Spaw – spaw.inc.php, następnie
tworzy postać edytora w zmiennej {stala}$spaw1{/stala}. Następny
fragment kodu PHP pokazuje zawartość zmiennej
– sam edytor.
{/tlo}
{tlo_1}
Krok 11. Sięganie głębiej
Aby pokazać bardziej zaawansowany przykład, otwieramy
pliki spaw2.php i file.html. Spaw przechowuje
treść strony nad którą pracujemy w globalnej zmiennej.
Możemy do niej sięgnąć i zapisać we wcześniej
zdefiniowanym pliku, bazie danych lub przenieść to
na inną stronę.
{/tlo}
{tlo_0}
Krok 12. Integracja spaw
To narzędzie zaprojektowano jako wtyczkę dla innych
skryptów. Aby pokazać jak może działać, zintegrowałem
Spaw z systemem zarządzania treścią phpCMS,
postępując zgodnie z instrukcją zamieszczoną w dokumentacji
Spaw. Zaczniemy od instalacji phpCMS na
tym samym serwerze co Spaw.
{/tlo}
{tlo_1}
Krok 13. Instalacja phpcms
Rozpakowujemy phpcms-1.2.2.zip. Otwieramy plik
{stala}/parser/include/default.php{/stala} i zmieniamy hasło w linii
{stala}$this->PASS = \’Nasze hasło\’;{/stala}. Zapisujemy edytowany
plik, następnie wgrywamy folder parser i demo-en
do głównego folderu na naszym serwerze. Demo-de
możemy pominąć.
{/tlo}
{tlo_0}
Krok 14. Wracamy do spaw
Łączymy się z serwerem za pomocą naszego klienta
FTP. Przenosimy folder spaw2, który zainstalowaliśmy
wcześniej, do katalogu phpCMS -parser. Następnie będziemy
potrzebować kilku plików phpCMS. Przechodzimy
do {stala}/demo-en/template/{/stala} i otwieramy plik home.en.tpl
w edytorze tekstowym.
{/tlo}
{tlo_1}
Krok 15. Edycja i upload
Zmieniamy linię {stala}{CONTENT EDITTYPE=TEXTAREA
ROWS=20 COLS=70}{/stala} na {stala}{CONTENT EDITTYPE=WYSIWYG}{/stala}
i wgrywamy plik do {stala}/demo-en/template{/stala} na
naszym serwerze. Otwieramy home.en.ini w tym samym
folderze i zmieniamy domyślne hasło. Wgrywamy
edytowany plik.
{/tlo}
{tlo_0}
Krok 16. Ostatnia poprawka
Odnajdujemy plik PHP o nazwie lass.edit_wysiwyg_
phpcms.php na płycie CD. Zawiera on kod, który teraz
wklejamy do Spaw Editora do phpCMS – musi on
być wgrany do katalogu {stala}/parser/include/{/stala} na naszym
serwerze.
{/tlo}
{tlo_1}
Krok 17. Logujemy się do phpcms
W przeglądarce przechodzimy do {stala}naszadomena.com/{/stala}
parser/parser.php. Logujemy się korzystając z pierwszego
hasła, które zdefiniowaliśmy, by uzyskać dostęp
do konta administratora. Klikamy odnośnik Configuration.
Przewijamy w dół, aż znajdziemy Online Editor
i ustawiamy go na On.
{/tlo}
{tlo_0}
Krok 18. Testujemy instalację
Klikamy Save Settings i przycisk Wstecz w przeglądarce,
by wrócić do strony powitalnej. Klikamy link Demo
site of standard installation. Dodajemy ciąg {stala}&phpcmsaction=
edit{/stala} na końcu URL-a wyświetlanego w polu
adresowym, następnie klikamy Enter.
{/tlo}
{tlo_1}
Krok 19. Koniec
Pełna integracja! Logujemy się z użyciem drugiego hasła, które wcześniej ustaliliśmy dla phpCMS i odświeżamy
stronę. Przewijamy w dół, aż ukażą się przyciski Edit, Save i Logout. Klikamy przycisk Enter – w ten sposób uruchamiamy
w pełni zintegrowany Spaw Editor.
{/tlo}
Porada eksperta
Integracja Spaw
Dokumentacja jaką otrzymujemy wraz ze Spaw jest nierówna, lecz przewodnik
opisujący integrację trzeba przeczytać. Brak w nim przykładów, jednak znajdziemy
opis zaawansowanych funkcji.
http://www.spaweditor.com/spaw/spaw2/docs/documentation/integrators.html
phpCMS wiki
phpCMS to utworzony w Niemczech CMS, który nie wymaga połączenia z bazą
danych. Dokumentacja w języku angielskim została przygotowana w stylu wiki,
z poradnikami i wieloma artykułami.
http://docs.phpcms.de/index.php/Main_Page
