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

Popularity: 37%



WP Oceny
1
0
0
0
0
0
0
0


Odpowiedz

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

Wordpress 3.0

Ostatnio mało się pojawia, gdyż jestem w trakcie kończenia studiów. Nie spodziewałem się tego, że będzie tyle przy tym roboty [...]

jQuery: sprawdzanie dostępności

W dzisiejszym wpisie zaprezentuję Wam jak z wykorzystaniem biblioteki jQuery napisać sprawdzanie dostępności np. loginu przy rejestracji na stronie. Funkcja [...]

jQuery: powielanie pól formularza

Dzięki jQuery możemy powielać niektóre pola naszego formularza w bardzo prosty sposób. Wartości wpisywane do tych pól są zapisywane wtedy [...]

jQuery: zliczanie i limit znaków

Jakiś czas temu pokazałem jak przy użyciu JavaScriptu zrobić prosty licznik znaków wpisanych do pola typu textarea oraz jak ograniczyć [...]

  Sponsorzy bloga
  Reklama na blogach - Brand New Media
Reklama na blogach - Blogvertising.pl
Silesia City Center on Facebook