FCKeditor – edytor WYSIWYG HTML

 

Dzisiaj chciałbym przedstawić proces dodawania wizualnego edytora html w projekcie ASP.NET. Edytor taki może być przydatny w momencie, gdy chcemy mieć do dyspozycji łatwy sposób wprowadzania treści umieszczanych potem na stronie. Chodzi tutaj o możliwość wprowadzania nie tylko czystego tekstu, ale także formatowanego (pogrubienie, kursywa), umieszczania obrazków, filmów YouTube itd. Tutaj z pomocą przychodzi nam darmowy FCKeditor (w najnowszej wersji przemianowany na CKEditor) rozprowadzany na licencjach GPL, LGPL, MPL. W tym tutorialu przedstawiony zostanie opis dla nieco starszej wersji oznaczonej jako FCKeditor 2.6.6.

Edytor można pobrać ze strony http://ckeditor.com/download. W przypadku ASP.NET jedną z dróg (przedstawianą przeze mnie) jest pobranie dwóch plików. Są to: wspomniany FCKeditor 2.6.6 oraz FCKeditor.Net 2.6.4. W dużym skrócie – po rozpakowaniu pierwszego pliku otrzymujemy wszelkie źródła .js, natomiast po rozpakowaniu drugiego pliku uzyskujemy dostęp do .dll,  do której musimy dodać referencję w projekcie. Odpowiedni plik można odszukać w katalogu ~/FCKeditor.Net 2.6.4/bin/Release/2.0/FredCK.FCKeditorV2.dll. Po dodaniu samej referencji edytor jednak nie zadziała. Konieczne jest również dodanie do projektu katalogu ze “źródłami”, co można uczynić najprościej przechodząc do rozpakowanego katalogu FCKeditor 2.6.6 i wybierając opcję kopiowania folderu fckeditor, a następnie wklejając katalog w solucji projektu. Wynik wymienionych czynności powinien wyglądać następująco:

2011-02-06 part 1

Szczególnie interesujące są oczywiście pozycje wyróżnione kolorem żółtym.

W celu użycia FCKeditora na stronie .aspx niezbędne jest dodanie na początku pliku wpisu

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

Samą kontrolkę natomiast umieszcza się dodając kod:

<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" BasePath="~/fckeditor/" ToolbarSet="Basic">
</FCKeditorV2:FCKeditor>

Szczególnie interesujące są tutaj dwie właściwości BasePath oraz ToolbarSet. Pierwsza z nich wskazuje na położenie katalogu wewnątrz solucji ze źródłami edytora. Druga natomiast określa zestaw opcji dostępnych do wybrania podczas edycji tekstu. W przypadku niepodania drugiej właściwości przyjęte jest, że wyświetla się domyślny zestaw opcji. Okno edytora wygląda wtedy następująco:

2011-02-06 part 2

Nie każdemu jednak taki zestaw opcji jest niezbędny do działania. Istnieje tutaj dowolna możliwość konfiguracji. Jeśli chodzi o ustawienia FCKeditora warto zainteresować się plikiem w podkatalogu fckeditor o nazwie fckconfig.js. Odnajdując odpowiednią sekcję ToolbarSets można zobaczyć ustawienia w rodzaju tych umieszczonych na rysunku poniżej:

2011-02-06 part 3

Z powyższego rysunku wynika, że FCKeditor dysponuje dwoma wbudowanymi zestawami paska opcji – Default oraz Basic, które to mogą być ustawione poprzez wspomnianą wcześniej właściwość kontrolki (uwaga na powyższym rysunku znalazła się opcja YouTube, która nie jest standardowo dostępna). Oczywiście opcje dostępne na pasku Basic są podzbiorem opcji paska Default, aczkolwiek możliwe jest korzystanie z pluginów, które wzbogacają znacznie funkcjonalność edytora.

Grzebanie w opcjach konfiguracyjnych dostarczonych przez producenta ma jednak dwie wady. Po pierwsze istnieje możliwość utracenia starej zawartości pliku, jeśli ktoś nie komentuje istniejących do tej pory wpisów. Po drugie, tracimy na mobilności. Jeśli zmieni się wersja edytora i trzeba będzie podmienić katalog ze źródłami, bądź też zajdzie taka potrzeba z jakiegoś innego powodu, tracimy nasze dodane ustawienia. Z tego powodu warto przechowywać własne ustawienia w osobnym pliku, który można umieścić np. w katalogu głównym solucji, nie tracąc go przy zmianie wersji edytora.

Zdefiniujmy zatem własny, skromny pasek dla edytora w osobnym pliku konfiguracyjnym. W tym celu tworzymy nowy plik o nazwie np. fckcustom_config.js w katalogu głównym solucji (przy profesjonalnych projektach warto mieć osobny katalog dla takich plików). W pliku tym dodajemy analogicznie do wpisu na poprzednim rysunku następujący kod:

2011-02-06 part 35

Jak łatwo się domyślić, w pasku edytora będą jedynie opcje pogrubienia, kursywy, podkreślenia, oraz wstawienia listy uporządkowanej i nieuporządkowanej. Znak ‘-‘ oznacza graficzny separator pomiędzy opcjami.

Aby możliwe było korzystanie z dodatkowego pliku konfiguracyjnego należy jeszcze dodać w istniejącym do tej pory pliku fckconfig.js wpis mówiący o ścieżce do pliku z dodatkową konfiguracją. W moim przypadku ma on postać:

FCKConfig.CustomConfigurationsPath = ‚/fckcustom_config.js’;

Teraz właściwość kontrolki można ustawić na ToolbarSet = “MyOptions” i po uruchomieniu programu cieszyć się takim oto widokiem spersonalizowanego paska opcji:

2011-02-06 part 4