Połącz się z nami

Internet Maker

FCKeditor 2.2 – projekt miesiąca

Rzadko się zdarza, aby wpływowy dla środowiska Open Source serwis SourceForge.Net przyznawał wyróżnienie „projekt miesiąca” narzędziom przydatnym webmasterom. Tym bardziej więc jest to warte uwagi. FCKeditor to zestaw skryptów JavaScript oraz skryptów instalowanych po stronie serwera, przygotowanych m.in. w PHP. Wszystko to ma służyć dostarczeniu przemyślanego i dopracowanego edytora WYSIWYG do wstawienia na strony internetowe.

Nie jest to wprawdzie jedyne dostępne narzędzie tego typu, ale jako jedyne z darmowych oferuje tak szeroką funkcjonalność – nie poprzestaje wyłącznie na prostym formatowaniu tekstu, ale udostępnia rozbudowane narzędzia do tworzenia tabel, wklejania tekstu czy wstawiania obrazów.

W efekcie FCKeditor świetnie integruje się ze wszystkimi systemami, w których wymagana jest możliwość formatowania tekstu z poziomu przeglądarki internetowej. Są to przede wszystkim systemy zarządzania zawartością (CMS – Content Management System), blogi, webmaile, fora dyskusyjne i czaty, systemy aukcyjne i portalowe oraz wszystkie te miejsca, gdzie użytkownik ma możliwość wprowadzenia dłuższej niż jedno zdanie wypowiedzi.

Instalacja skryptu jest bardzo prosta. Opisaliśmy ją w osobnej ramce, wzbogacając o podstawowy opis najważniejszych elementów konfiguracji. Zaletą FCKeditora jest jego wysoka konfigurowalność. Począwszy od możliwości zmiany wyglądu, poprzez wybór wersji językowej (w tym polskiej), a skończywszy na wyborze dostępnych opcji w paskach narzędziowych.

Jeżeli podstawowa funkcjonalność programu nie będzie ci odpowiadać, możesz ją we własnym zakresie rozbudować. FCKeditor dostarcza zbiór funkcji API stworzonych w JavaScripcie, dzięki którym będziesz mógł tworzyć własne funkcje JS integrujące się z edytorem.

Oprócz zbioru JavaScriptów dostarczany jest także pełen zestaw skryptów do zainstalowania po stronie serwera, w wielu różnych językach programowania. Dostępne są: ASP, ASP.NET, PHP, ColdFusion, Java, Perl i Python. Skrypty te pełnią dwojaką funkcję – po pierwsze, umożliwiają wyświetlanie narzędzi dogrywanych z serwera (np. wstawianie tabel, obrazów, emotikonów i innych). Po drugie natomiast – dostarczają programistom zbiór funkcji API, które po dołączeniu do własnych skryptów (np. PHP) pozwalają zarządzać procesem generowania edytora.

W przypadku PHP tworzony jest obiekt, a następnie za pomocą jego metod można ustalić wszelkie szczegóły konfiguracji FCKeditora. Na końcu edytor zostanie wygenerowany. Jest to metoda alternatywna w stosunku do ręcznej konfiguracji z poziomu JavaScript, którą opisano w ramkach obok.

Sam edytor posiada wszystkie najważniejsze funkcje, do których przyzwyczaili się użytkownicy programu MS Word – formatowanie tekstu, wybór koloru tekstu i tła, wstawianie tabel, listy numerowane i wypunktowane (także wzajemnie zagnieżdżone), wklejanie (z oryginalnym formatowaniem lub jako czysty tekst, a także opcja \”Wklej z Worda\”), formularze, obrazy (wraz z możliwością wgrania na serwer), tablice znaków, emotikony, wyszukiwanie tekstu, drukowanie, podgląd wydruku i zapisywanie dokumentu (do indywidualnego oprogramowania). Słowem – polecamy!

Instalacja FCKeditor – krok po kroku

{tlo_1}

1. Pobierz najnowszą wersję FCKeditor

ze strony http://www.fckeditor.net/. Następnie rozpakuj zawartość i wgraj do katalogu fckeditor na serwerze lub dowolnego innego (pamiętaj wówczas o zmianie ścieżek dostępu w dalszej części instalacji). Część plików mających charakter instruktażowy lub informacyjny możesz usunąć.

{/tlo}

{tlo_0}

2. Przygotuj stronę HTML,

do której chcesz wstawić edytor WYSIWYG, korzystając z FCKeditor. W nagłówek HEAD wstaw odwołanie do skryptu fckeditor.js – jak w powyższym przykładzie. Pamiętaj, aby ścieżka do JavaScriptu zgadzała się z rzeczywistością (w naszym przykładzie fckeditor.js jest w tym samym katalogu).

{/tlo}

{tlo_1}

3. FCKeditor można wstawić na stronę

na dwa sposoby. Pierwszy z nich wygeneruje odpowiednie pole tekstowe za ciebie. Wystarczy, że w żądanym miejscu na stronie wstawisz powyższy kod JS. Wstawi on na stronę edytor WYSIWYG w domyślnej postaci, czyli z pełną funkcjonalnością. Nazwę FCKeditor1 możesz ewentualnie zmienić na własną. Pod taką nazwą będziesz mógł odczytać zawartość pola w skrypcie przetwarzającym wynik. Drugi sposób to zmiana w już istniejącym w kodzie strony polu texarea – szczegóły w dokumentacji.

{/tlo}{tlo_0}

4. Dodaj dodatkowe opcje konfiguracyjne,

zgodne z ramką prezentowaną obok. W ten sposób precyzyjnie ustalisz sposób prezentacji i zachowanie swojego edytora. W powyższym przykładzie używamy standardowego (pełnego) paska narzędziowego i szablonu silver (domyślnym jest default) oraz zawsze polskiej wersji językowej (bez autodetekcji). Edytor będzie miał szerokość 800 px i wysokość 600 px. Możesz doinstalować lub stworzyć własne szablony, FCKeditor posiada również w standardzie trzy zestawy ikonek.

{/tlo}

{tlo_1}

5. Na koniec przygotuj, a następnie wgraj

na serwer skrypt przetwarzający dane wynikowe o nazwie zgodnej z atrybutem \”action\” znacznika {html}

{/html}. Do kodu wynikowego edytora odwołujesz się tak jak do zwykłego pola tekstowego – używając tablicy specjalnej {stala}$_POST{/stala}. Powyższy skrypt wyświetli na stronie pracę stworzoną w edytorzy WYSIWYG. W rzeczywistości możliwości są nieograniczone – dane można zapisywać w bazie danych do dalszego wykorzystania, wysyłać pocztą czy przetwarzać.

{/tlo}

{tlo_0}

6. Tak wygląda gotowy edytor

w praktyce. Co prawda ten ma spore rozmiary (i pełną funkcjonalność), jednak w zależności od zastosowań możesz go znacznie zmodyfikować. Jeżeli dysponujesz małą przestrzenią lub nie potrzebujesz zaawansowanych opcji, ogranicz jego funkcje.

{/tlo}

Zbędne pliki

Część zainstalowanych plików ma charakter instruktażowy lub informacyjny (np. przykłady i licencje) – możesz je usunąć. Na pewno nie będą potrzebne foldery rozpoczynające się od znaku podkreślenia. W zależności od potrzeby możesz usunąć również wersje skryptów dla języków, z których nie będziesz korzystać (np. ASP, Perl, Pyton) – najczęściej system będzie uruchamiany przez PHP. Możesz również usunąć część niepotrzebnej zawartości folderów w katalogu editor. Są tam dodatkowe wtyczki, wersje językowe i graficzne. Aby odchudzić skrypt, możesz wyrzucić te, z których nie zamierzasz korzystać.

Konfiguracja w pigułce

Większych zmian konfiguracyjnych najlepiej dokonywać, tworząc osobny plik JavaScript, o nazwie na przykład myconfig.js. Aby zadziałał, wstaw na samym początku głównego pliku konfiguracyjnego fsconfig.js następującą linijkę:

FCKConfig.CustomConfigurationsPath = \"/fckeditor/myconfig.js\" ;

Opcje konfiguracyjne zastosowane w pliku myconfig.js mogą zostać nadpisane bezpośrednio przy inicjowaniu edytora, na przykład:

oFCKeditor.Config[\'DefaultLanguage\'] = \"pl\" ;

Poniżej znajdują się najważniejsze opcje konfiguracyjne, których możesz używać w myconfig.js:

  • Wysokość i szerokość edytora wraz z paskami narzędzi (domyślna szerokość: 100%):
FCKConfig.Width  = 100% ;
FCKConfig.Height = 300 ;
  • Automatyczna detekcja języka przeglądarki (domyślnie: true):
FCKConfig.AutoDetectLanguage = true;
  • Domyślny język w przypadku, gdy detekcja zawiedzie lub jest wyłączona (domyślnie: en):
FCKConfig.DefaultLanguage = \'pl\' ;
  • Takie ustawienie spowoduje, że wklejając tekst, edytor będzie się starał otworzyć narzędzie do usuwania wszelkiego formatowania (domyślnie: false):
FCKConfig.ForcePasteAsPlainText = true ;
  • Możliwość edycji pełnej zawartości strony wraz z nagłówkiem HEAD. Dotyczy opcji podglądu kodu źródłowego:
FCKConfig.FullPage  = true ;
  • Dostępne kolory, wymienione po przecinku za pomocą kodu heksadecymalnego (lista ograniczona):
FCKConfig.FontColors = \'000000,FFFFFF\' ;
  • Dostępne czcionki, oddzielone średnikami (wypisano tylko część):
FCKConfig.FontNames = \'Arial; Verdana\' ;
  • Dostępne rozmiary czcionki wraz z opisem. Poszczególne rozmiary rozdzielone są średnikiem, a rozmiar od opisu – ukośnikiem (wypisano tylko część):
FCKConfig.FontSizes = \'3/small;4/medium;5/large\' ;
  • Dostępne predefiniowane formaty:
FCKConfig.FontFormats = \'p;div;pre;address;h1;h2;h3;h4;h5;h6\' ;
  • Wybiera stosowany zestaw emotikonów (domyślnie dostępny jest tylko msn):
FCKConfig.SmileyPath = \'/fckeditor/editor/images/smiley/msn/\' ;
  • Wskazuje dostępne pliki z emotikonami (wypisano tylko część):
FCKConfig.SmileyImages = [\'regular_smile.gif\', \'sad_smile.gif\'];

Używając dwóch powyższych linijek można dograć własny zestaw emotikonów.

Własny pasek narzędziowy

Może się zdarzyć, że z różnych względów nie będziesz chciał udostępnić wszystkich narzędzi dostępnych w pełnym pasku narzędziowym (pasek default), a jednocześnie pasek zdefiniowany domyślnie jako basic będzie zbyt minimalistyczny. FCKeditor daje możliwość stworzenia własnego paska narzędziowego, dostosowanego do indywidualnych potrzeb.

Pasek możesz skonfigurować, edytując swój indywidualny plik konfiguracyjny, np. myconfig.js. W dowolnym miejscu pliku konfiguracyjnego wpisz:

FCKConfig.ToolbarSets[\"MojeMenu\"] = [
 [\'Source\',\'DocProps\',\'-\',\'Save\',\'NewPage\',\'Preview\',\'-\',\'Templates\'],
 [\'Cut\',\'Copy\',\'Paste\',\'PasteText\',\'PasteWord\',\'-\',\'Print\',\'SpellCheck\'],
 [\'Undo\',\'Redo\',\'-\',\'Find\',\'Replace\',\'-\',\'SelectAll\',\'RemoveFormat\'],
 [\'Bold\',\'Italic\',\'Underline\',\'StrikeThrough\',\'-\',\'Subscript\',\'Superscript\'],
 [\'OrderedList\',\'UnorderedList\',\'-\',\'Outdent\',\'Indent\'],
 [\'JustifyLeft\',\'JustifyCenter\',\'JustifyRight\',\'JustifyFull\'],
 [\'Link\',\'Unlink\',\'Anchor\'],
 [\'Image\',\'Flash\',\'Table\',\'Rule\',\'Smiley\',\'SpecialChar\',\'UniversalKey\'],
 [\'Form\',\'Checkbox\',\'Radio\',\'TextField\',\'Textarea\',\'Select\',\'Button\',\'Ima­geButton\',\'HiddenField\'],
 \'/\',
 [\'Style\',\'FontFormat\',\'FontName\',\'FontSize\'],
 [\'TextColor\',\'BGColor\'],
 [\'About\']
] ;FCKConfig.ToolbarSets[\"MojeMenu\"] = [
 [\'Source\',\'DocProps\',\'-\',\'Save\',\'NewPage\',\'Preview\',\'-\',\'Templates\'],
 [\'Cut\',\'Copy\',\'Paste\',\'PasteText\',\'PasteWord\',\'-\',\'Print\',\'SpellCheck\'],
 [\'Undo\',\'Redo\',\'-\',\'Find\',\'Replace\',\'-\',\'SelectAll\',\'RemoveFormat\'],
 [\'Bold\',\'Italic\',\'Underline\',\'StrikeThrough\',\'-\',\'Subscript\',\'Superscript\'],
 [\'OrderedList\',\'UnorderedList\',\'-\',\'Outdent\',\'Indent\'],
 [\'JustifyLeft\',\'JustifyCenter\',\'JustifyRight\',\'JustifyFull\'],
 [\'Link\',\'Unlink\',\'Anchor\'],
 [\'Image\',\'Flash\',\'Table\',\'Rule\',\'Smiley\',\'SpecialChar\',\'UniversalKey\'],
 [\'Form\',\'Checkbox\',\'Radio\',\'TextField\',\'Textarea\',\'Select\',\'Button\',\'Ima­geButton\',\'HiddenField\'],
 \'/\',
 [\'Style\',\'FontFormat\',\'FontName\',\'FontSize\'],
 [\'TextColor\',\'BGColor\'],
 [\'About\']
] ;

Powyższy przykład jest dokładnym klonem menu narzędziowego default. Dzięki temu możesz poznać wszystkie dostępne opcje, zmienić ich kolejność i usunąć część z nich w razie potrzeby. Opcje ukrywa się poprzez usunięcie z listy powyżej jej nazwy, wraz z ewentualnym przecinkiem (jak widać, opcje są przechowywane jako tablica).

Stworzenie podtablicy powoduje grupowanie opcji w określone bloki. Opcja \’-\’ oznacza separator pionowy, natomiast zastosowanie \’/\’ spowoduje przejście z kolejnym blokiem do nowej linijki. Aby lepiej zrozumieć budowę pasków narzędziowych, przyjrzyj się konstrukcji paska default na ilustracjach oraz na żywo, a następnie porównaj z podaną wyżej konfiguracją. Powinieneś zauważyć podobieństwo.

Gdy już pousuwasz lub zmienisz kolejność zbędnych opcji, możesz wskazać swój pasek narzędziowy przy inicjowaniu edytora:

Administrator, programista systemów operacyjnych i aplikacji internetowych. Internetem zajmuje się od 1998 roku, niemal od początku działając również jako dziennikarz branżowy.

Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Popularne

Wizytówka przy użyciu pluginu Hovercard

Internet Maker

Jak zbudować aplikację na Androida?

Internet Maker

Jak wyświetlać losową treść przy użyciu JavaScript

Internet Maker

Jak napisać prostą aplikację na Facebook’a w JavaScript SDK?

Internet Maker

Połącz
Newsletter

Zapisz się do naszego newslettera i bądź na bieżąco!