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: 32%

Odpowiedz

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





Zend Framework: gwiazdka przy wymaganych polach

W przypadku wymaganych pól w formularzach najczęściej oznacza się je poprzez dodanie gwiazdki. W tym wpisie chciałbym pokazać w jaki [...]

MySQL: GROUP_CONCAT

Ostatnio zostałem poproszony, aby na liście zamówień w sklepie PrestaShop wyświetlić listę produktów, które zostały sprzedane. Oczywiście można by było [...]

Zend Framework: jak zwiększyć wartość o 1 w bazie danych?

Ostatnio wykonując projekt w Zend Framework musiałem zwiększyć wartość kolumny pewnego rekordu o jeden. Oczywiście można by było wykonać najpierw [...]

PHP: Skracanie długich linków

Czasem w komentarzach ktoś może wstawić długi link, który może rozciągnąć naszą stronę. Jednym z rozwiązań jest skrócenie linku. Przykładowo [...]