Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

Wykorzystaj panel edycji tekstów Webassist HTML Editor.

W swej codziennej pracy często staje przed zadaniem przygotowania prostego panelu CMS dla moich klientów. Wielu z nich bezwzględnie potrzebuje samodzielnie dodawać nowości, kolejne oferty promocyjne czy choćby edytować jedynie ceny swoich produktów. Dzięki użyciu programu Adobe Dreamweaver przygotowanie takiej funkcjonalności nie jest bardzo poważnym wyzwaniem.

Wbudowane narzędzia programu pozwalają łatwo i szybko przygotować moduł zarządzania treścią nawet średnio zaawansowanym użytkownikom. Jednak jak to często bywa, problemy pojawiają się szybko, bardzo szybko…

Wyobraźmy sobie sytuację, gdy nasz klient może sam dodać kolejnego newsa na stronie. No cóż, nic nadzwyczajnego, takie było nasze założenie. Jednak bardzo szybko pojawiają się jego pytania.

W jaki sposób mogę dodać link do odpowiedniej strony w Internecie? Jak przygotować listę produktów? Jak dodać grafikę do czy plik SWF? I to jest właśnie nasz problem.

Mimo, że Adobe Dreamweaver pozwala szybko przygotować panel zarządzania treścią, nie daje już gotowych rozwiązań umożliwiających wygodne formatowanie tekstu czy też osadzanie w nim plików graficznych/zdjęć lub banerów w formacie SWF.

Są jednak plug-iny, które nie tylko umożliwiają takie działania, dodatkowo są proste w użyciu i pozwalają skrócić czas naszej pracy do absolutnego minimum. Firma Webassist (www.webassist.com) przygotowała niewielki dodatek (Extension) HTML Editor do programu Adobe Dreamweaver, który doskonale sprawdzi się podczas takich działań.

Webassist HTML Editor to całkiem złożony (pod kątem funkcjonalności, ale już nie obsługi) edytor, który umożliwia przygotowanie panelu zarządzania treścią – CMS (Content Management System) wraz z możliwością formatowania kolejnych wpisów jak i dodawania zdjęć czy plików SWF.

Moduł ten jest częścią niezwykle potężnego pakietu rozszerzeń firmy Webassist – Super Suite. Może być instalowany zarówno jako części całego zestawu narzędzi Webassist lub także jako całkowicie odrębne rozszerzenie.

HTML Editor – możliwości

Ten prosty dodatek pozwala dodać możliwość formatowania tekstu, jaki za pomocą formularza przesłany zostanie w wiadomości e-mail lub do bazy danych. Dodatkowo dzięki rozszerzonym możliwościom pozwala także zamieszczać w tekście i przesyłać na serwer elementy graficzne – zdjęcia, logotypy czy reklamy.

Dzięki użyciu edytora – Webassist HTML Editor możemy znacznie rozszerzyć możliwości Adobe Dreamweaver w zakresie tworzenia własnych systemów CMS.

Dreamweaver Extensions

Adobe Dreamweaver, podobnie jak inne aplikacje firmy Adobe pozwala na użycie dodatkowych modułów rozszerzających ich możliwości. W przypadku, programów wywodzących się bezpośrednio z firmy Macromedia (np. Flash, Dreamweaver), dodatki tego typu nie są nazywane Plug-inami, a zwykle występują pod nazwą Extension lub Component.

Każdy moduł dodatkowy – Extension zapisany jest w postaci pojedynczego pliku z rozszerzeniem .MXP. Do jego instalacji konieczne jest posiadanie darmowej aplikacji – Extension Manager, która instaluje się wraz z dowolnym programem Adobe.

Instalacja

Instalator dodatku Webassist HTML Editor dostępny jest w postaci pliku z rozszerzeniem .MXP. Oznacza to, że jego instalacja jest niezwykle prosta. Uruchomienie instalatora za pośrednictwem Extension Managera zainstaluje dodatek pośród innych plug-inów Dreamweavera. Podobnie jak wiele innych programów, Webassist HTML Editor zabezpieczony jest numerem seryjnym oraz internetową aktywacją. Sam proces instalacji oraz aktywacji trwa dosłownie moment i nie sprawia żadnych problemów.

Większość zainstalowanych dodatków (choć nie wszystkie) dostępne są do użycia za pomocą wygodnych przycisków widocznych w zakładkach panelu Insert. Webassist HTML Editor zlokalizowany jest na pasku Insert w zakładce Webassist.

Naturalnie, w każdej chwili możemy wykorzystać menu górne i polecenie Insert>Webassist>HTML Editor. W obu przypadkach otwarte zostanie to samo okno konfiguracyjne umożliwiające precyzyjne określenie sposobu działania plug-ina na naszej stronie.

Przy pierwszym uruchomieniu dodatku, konieczne jest wprowadzenie numeru seryjnego oraz aktywacja produktu. Nie ma z tym żadnych kłopotów. Wszystko działa szybko i sprawnie.
Dzięki użyciu narzędzia Extension Manager, w każdej chwili możemy łatwo usunąć zainstalowany dodatek.

Wymagania wstępne

Aby skorzystać z panelu HTML Editor firmy Webassist na stronie WWW, musimy oczywiście przygotować wcześniej (najlepiej) kompletną stronę zawierającą gotowy formularz HTML. Nie jest przy tym istotne jakiej technologii wykorzystamy do budowy samej strony. Dreamweaver pozwoli dodać moduł HTML Editor zarówno do statycznych stron HTML, jak także (czy może przede wszystkim) do dynamicznych projektów tworzonych z użyciem języka ASP czy PHP.

W naszym przykładzie wykorzystałem przykład strony utworzonej za pomocą języka PHP i bazy danych MySQL. Dzięki użyciu programu Adobe Dreamweaver budowa formularza umożliwiającego dodanie danych nowego klienta do bazy danych okazało się niezwykle proste.

Za pomocą narzędzia Record Insertion Form Wizard nie tylko szybko dodałem gotowy formularz rejestracyjny, automatycznie skonfigurowałem wszystkie jego pola ale także niezbędną funkcjonalność.

 

Gotowy formularz za pomocą kilku prostych stylów CSS formatujemy tak, by dostosować jego wygląd do całej strony co pozwoli nam zakończyć wszelkie działania wstępne by przejść do właściwej pracy z dodatkiem HTML Editor.

Dodajemy edytor HTML do formularza

Edytor umożliwiający formatowanie tekstów czy dodawanie elementów graficznych wykorzystamy w naszej pracy tylko do jednego pola formularza – Opis. W tym prostym przykładzie nie ma większego sensu formatowanie innych, prostych pól dotyczących choćby imienia czy też adresu e-mail klienta.

Oczywiście, gdyby istniała konieczność wprowadzenia kilku niezależnych paneli nie będzie z tym żadnego problemu. Zasada w każdym przypadku jest dokładnie taka sama.

Rozpoczynamy od zaznaczenia istniejącego pola formularza, które chcielibyśmy zastąpić kopią edytora HTML i odczytujemy jego nazwę widoczną w panelu Properties. To niezwykle ważny krok, który pozwali później zachować poprawne działanie formularza nawet po dodaniu naszego edytora.

Po odczytaniu (wygodnie jest ją skopiować) nazwy pola po prostu usuwamy je ze strony i w jego miejsce za pomocą przycisku HTML Editor widocznego w zakładce Webassist panelu Insert dodajemy panel edytora. Jeśli wcześniej nie aktywowaliśmy dodatku w tym momencie wyświetlone zostanie okno umożliwiające wprowadzenie numeru jego licencji i rejestracja.

Okno edycyjne HTML Editor pozwala na wprowadzenie wielu istotnych ustawień dostępnych za pomocą dwóch przycisków Customize. Początkowo, nie jest konieczne wprowadzanie żadnych zmian, najważniejszą sprawą jest bowiem nadanie nazwy dodanego pola/edytora. W tym celu przechodzimy do sekcji Editor Name i wprowadzamy lub wklejamy nazwę pola jakie nieco wcześniej usunęliśmy z formularza.

W rezultacie powracamy do punktu wyjścia. Formularz zawiera ponownie pole tekstowe (nasz edytor HTML) o właściwej nazwie i ponownie jest gotowy do użycia. Zanim jednak zamkniemy okno konfiguracyjne warto choćby przejrzeć dostępne opcje.

Gotowy edytor widoczny jest w postaci prostej grafiki symulującej nieco finalny jego wygląd. Aby skorzystać z jego możliwości konieczne jest uruchomienie podglądu strony za pomocą dowolnej przeglądarki internetowej.

W każdej chwili możemy powrócić do edycji podstawowych ustawień edytora zaznaczając go na stronie i wykorzystując przycisk Edit widoczny w panelu Properties.

Konfiguracja edytora

Podstawowe ustawienia dotyczące edytora na stronie dostępne są w wyświetlonym oknie konfiguracyjnym w jego górnej sekcji.

• Editor Preset – to miejsce, które pozwala zapisać zestaw zdefiniowanych ustawień użytkownika. Jest to niesamowicie wygodna sprawa. Zamiast każdorazowo konfigurować te same ustawienia dla kolejnych pól edytora na stronie można przygotować kilka własnych ustawień i szybko korzystać z nich podczas codziennej pracy.
• Skin – to miejsce gdzie możemy (delikatnie) zmienić domyślny wygląd edytora na stronie. Jego podgląd widoczny jest poniżej co zdecydowanie ułatwia wybór.
• Width – to określenie szerokości edytora na stronie. Domyślnie ma on szerokość 100% co oznacza, że wypełnia on całą dostępną przestrzeń np. komórki tabeli czy też kontenera typu <div>.
• Height – to domyślna wysokość edytora.

Szczegółowe ustawienia edytora dostępne są za pomocą przycisku Customize widocznego w górnej sekcji okna. To za pomocą czterech zakładek przechodzimy do kolejnych ustawień.

Kluczową rolę odgrywa tu zakładka Toolbar, gdzie możemy łatwo określić, które elementy edytora chcemy udostępnić w danym miejscu. Pełna wersja panelu do edycji może być nieco kłopotliwa do użycia dla mniej doświadczonych użytkowników. To właśnie dlatego w swojej pracy preferuje edytor z minimalną listą opcji.

Format, pogrubienie, lista numerowana i nienumerowana, możliwość dodania odnośników, obrazków to w zasadzie wszystko czego trzeba w większości przypadków. Warto tu troszkę poeksperymentować by samodzielnie odnaleźć zestaw opcji najlepszy dla danego zastosowania i klienta.

W rezultacie użycia przycisku OK kończymy konfigurację edytora na stronie i … gotowe. Formularz z oknem edytora działa dokładnie w ten sam sposób jak wcześniej. Jedyna różnica to zestaw elementów formatowania danych zawarty w opisie Klienta przesłanym do bazy danych.

Z pewnością użycie Webassist HTML Editora pozwala bardzo łatwo i szybko dodać możliwości formatowania tekstu wprowadzanego za pomocą panelu CMS. Nie jest to jednak koniec jego możliwości.

Dzięki użyciu plug-ina HTML Editor nasi klienci mogą także umieszczać w kodzie odnośniki tekstowe, grafiki a nawet pliki SWF. Co ważne, sam edytor zadba o to by wybrane przez użytkownika obrazy zostały automatycznie przeniesione na serwer WWW. To już rewelacja!

Wszystkie elementy konfiguracyjne edytora zapisane są w folderze HTMLEditor w obrębie naszego site’a. Dodatkowy folder zawiera elementy graficzne przesłane na serwer za pomocą edytora.

Warto pamiętać by wraz ze stroną WWW zawierającą wykorzystany przesłać na serwer internetowy także cały katalog HTMLEditor. Tu bowiem zapisane są wszelkie dane konfiguracyjne edytora.

Ocena

Muszę szczerze przyznać, że tak łatwego sposobu wykorzystania możliwości użycia formatowania tekstu na stronie WWW nie widziałem nigdy wcześniej. Sposób edycji, konfiguracja jest tak prosta, że nie ma możliwości by sprawiła jakiekolwiek problemy nawet mniej doświadczonym użytkownikom programu Dreamweaver. Co ważne dodatek doskonale działa w języku polskim i nie ma z nim żadnych problemów w codziennym użyciu.

Serdecznie polecam użycie Webassist HTML Editor w swojej pracy.

Paweł Zakrzewski