FCKeditor 2.2 – projekt miesiąca

{/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: