CKEditor: własny motyw graficzny

by Mateusz Tymek — on CSS

Head's up! This post was written back in 2010 and is very likely to contain outdated information.

CKEditorCKEditor jest naprawdę fajnym i wygodnym edytorem dla stron internetowych. Jednak chyba wiele osób zgodzi się ze mną, że nie wygląda on zbyt ładnie - posiada brzydkie, kanciaste ikonki, a pstrokate przyciski oknach dialogowych (w domyślnej skórce) nie pasują do niczego. Ktoś powie, że o gustach się nie dyskutuje, ktoś inny - że szkoda tracić czas na poprawianie tego - i tak najczęściej CKEditor oglądany będzie tylko przez administratora strony. Okazuje się jednak, że stworzenie własnej skórki na bazie istniejącej jest dosyć proste, a nawet godzina spędzona nad poprawieniem wyglądu znacznie podniesie estetykę strony.

Aby mieć jakieś porównanie, zobaczmy najpierw jak wygląda CKEditor w domyślnej skórce:

Załóżmy że nasz motyw bazować będzie na "v2". Skopiujmy katalog ckeditor/skins/v2 do nowego, np. ckeditor/skins/shiny. "Shiny" będzie nasza nową nazwą. Teraz otwieramy kolejno pliki dialog.css, editor.css, templates.css i skin.js (znajdują się w katalogu z naszą skórką). W każdym z nich zamieniamy wszystkie wystąpienia tekstu "v2" na "shiny". Możemy sprawdzić czy zadziała: zmieniamy nową nazwę w konfiguracji edytora:

CKEDITOR.editorConfig = function( config ) {
    config.skin = 'shiny';
}

Jeżeli wszystko działa, to możemy zacząć wprowadzać zmiany. Najpierw ikonki - znajdziemy je w pliku /shiny/icons.png. Najprościej będzie podmienić je z jakimiś gotowymi. Dobrze pasują np. te z tematu Office2003 dla FCKeditora (poprzednik CKEditora, ciągle do pobrania stąd: http://ckeditor.com/download).

Po zmianie ikon możemy dobrać się do arkusza CSS. Najbardziej interesujący plik to editor.css. Jest skompresowany, a więc trzeba sformatować go jakimś narzędziem (pierwsze z Google: http://www.cleancss.com/). Teraz przy pomocy Firebuga odszukujemy interesujące fragmenty tego pliku i zmieniamy je w zależności od upodobań.

Oto przykład edytora po moich zmianach (usunąłem także kilka niepotrzebnych mi ikon z toolbara):

Prawda że wygląda lepiej?

Możecie pobrać moją skórkę klikając tutaj.


comments powered by Disqus