WYSIWYG: CKEditor 3.1

Autor: Arkadiusz Tobiasz 30 stycznia 2010

Prowadząc stronę, którą napisaliśmy sami często posiadamy tzw. panel administracyjny, gdzie za pomocą formularzy dodajemy newsy, artykuły itp. Dopóki sami zajmujemy się aktualizacją strony wszystko jest OK. Znamy bowiem znaczniki HTML-a i z łatwością formatujemy tekst, który chcemy wrzucić. Jednak wraz z rozrostem strony sięgamy po pomoc innych osób, które niekoniecznie znają się na HTML-u. Tutaj z pomocą przychodzi nam edytor WYSIWYG, który wszystkie pola textarea z naszego formularza zamienia na wizualny edytor, który swoim wyglądem przypomina np. Worda. Najlepszym, według mnie darmowym edytorem WYSIWYG jest CKEditor, znany niegdyś jako FCKEditor. Co więc musimy zrobić, aby umieścić to „cudo” na swojej stronie?

Zanim zaczniesz go instalować zobacz może jak wygląda i czy na pewno spełnia twoje oczekiwania. Na stronie domowej dostępne jest demo tego edytora. Możesz sprawdzić podstawowe funkcjonalności jakie oferuje ten skrypt. Wszystkie opcje możesz sam skonfigurować dostosowując edytor do swoich wymagań.

OK, chcę ten edytor. Co teraz? Na początku pobierz edytor z jego strony domowej na swój dysk twardy. Oczywiście najlepiej jak będzie to najnowsza wersja skryptu. Następnie wszystkie pliki (cały katalog ckeditor) przenieś do katalogu głównego Twojej strony. Trochę to potrwa.

Mając pliki na serwerze możesz przystąpić do implementacji edytora na swojej stronie www. W tym celu w sekcji <head>…</head> pliku, gdzie ma się wyświetlać edytor musisz umieścić następujący kod:

1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="ckeditor/adapters/jquery.js" type="text/javascript"></script>

Gotowe? To teraz musisz dodać w sekcji <body>…</body> trzeba dodać kod odpowiedzialny za zamianę wszystkich pól textarea na edytor WYSIWYG:

1
2
3
4
5
<script language="javascript">
        $(document).ready(function(){
            $('textarea').ckeditor({ height : 500 });
        });
</script>

W taki oto sposób uzyskasz na swojej stronie graficzny edytor, który ułatwi pracę Tobie i Twoim redaktorom. W celu odpowiedniej konfiguracji tego narzędzia odsyłam do dokumentacji

komentarze 2

  1. prodigy napisał(a):

    No dobrze, a jeżeli mam stronę w pełni stukaną z palca bazującą na HTML oraz javaskryptach bez zaplecza administracyjnego – czy mogę go również jakoś zaimplementować?
    Chodzi mi o to, żeby docelowy użytkownik strony nie musiał edytować z palca kodu strony używając total commandera i Notepada++, tylko żeby mógł sobie jakoś włączyć CKeditora na zasadzie backendowego dostępu dla uprawnionych userów

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]