Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

Darmowy edytor na stronie internetowej

CKEditor jest to darmowy edytor WYSIWYG do umieszczenia na stronie WWW. Bardzo przydatny, jeśli chcemy szybko napisać jakiś artykuł, blog bez wpisywania kodu HTML i co więcej bez jakiejkolwiek znajomości podstaw webmasteringu. Poza wpisywaniem zwykłego tekstu mamy możliwość wstawiania lub edycji hiperłącza, kotwicy, obrazków, elementów flasha oraz dodawania przycisków, emotikonów, znaków specjalnych itp. Oprócz tego wygodną funkcją jest używanie edytora na pełnym ekranie przeglądarki (ikona maksymalizuj). Natomiast, jeśli chcemy zobaczyć jak wygląda nasz przykładowy tekst w załącznikach to klikam przycisk Źródło dokumentu.

Moim zdaniem podręczny i szybki edytor HTML dostępny z poziomu naszej strony internetowej to bardzo dobre narzędzie pracy dla każdego webmastera. W dodatku przejrzysty interfejs i łatwość obsługi to największy plus tego Web edytora.

Umieszczenie CKEditor na stronie WWW

Integracja CKEditor na naszej stronie za pomocą języka JavaScript jest bardzo łatwa. Najpierw pobieramy paczkę z edytorem click. Następnie rozpakowujemy archiwum i wysyłamy katalog ckeditor na serwer. Teraz pozostaje nam tylko wkleić kawałek kodu w sekcji <head> i <body>.<head> <title>Sample - CKEditor</title> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head> <body> <form method="post"> <p> Mój Edytor<br /> <textarea name="editor1"></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script> </p> <p> <input type="submit" /> </p> </form> </body> Dodatkowo mamy możliwość wpływu na wygląd naszego edytora żeby jak najbardziej optymalnie dopasować do naszej strony internetowej, czyli: rozmiar, kolor, skórki itp. Szczegółowa dokumentacja na ten temat na witrynie CKSource Docs.

Na stronie producenta projektu dostępna jest również wcześniejsza wersja edytora tekstu FCKeditor.

Umieszczenie FCKeditor na stronie WWW

Podobnie jak w pierwszym przykładzie pobieramy paczkę z edytorem click. Następnie oczywiście rozpakowujemy archiwum i wysyłamy katalog fckeditor na serwer. Pozostaje nam jeszcze wkleić poniższy kod do wyboru JavaScript lub PHP.

Sposób za pomocą JavaScript

<head> <script type="text/javascript" src="fckeditor/fckeditor.js"></script> </head> <body> <script type="text/javascript"> var oFCKeditor = new FCKeditor('FCKeditor1'); oFCKeditor.BasePath = "/fckeditor/"; oFCKeditor.Create(); </script> </body>

Sposób za pomocą PHP

<?php //<textarea name='body' cols='95' rows='10' class='textbox'>$body</textarea>"; include("fckeditor/fckeditor.php") ; $oFCKeditor = new FCKeditor('body') ; $oFCKeditor->BasePath = 'fckeditor/'; $oFCKeditor->Width = '100%' ; $oFCKeditor->Height = '400' ; $oFCKeditor->Config['AutoDetectLanguage'] = false ; $oFCKeditor->Config['DefaultLanguage'] = 'pl'; $oFCKeditor->Create() ; ?>

Przykład jak w praktyce wygląda zintegrowanie obydwóch edytorów CKEditor i FCKeditor na stronie PHP-Fusion - tutaj.

Przydatne linki:Integration CKEditorCKSource Docs - The Official Documentation SiteDevelopers Guide - FCKeditor

Pozdrawiam. 

Komentarze

0 nowych
master_zonk6   7 #1 28.11.2010 18:58

oj dziękować. Tego było mi trzeba!

GL1zdA   11 #2 28.11.2010 19:32

Ze swojej strony mogę polecić TinyMCE - również bardzo wygodny edytorek.

GioWDS   13 #3 28.11.2010 20:58

Dziwne, ale między mordzie CKE bardziej przemawia do mnie niż TinyMCE - chociaż tego drugiego używam w każdym swoim projekcie. Chociaż w moim nowiusieńkim silniczku sprawdzę siły CKE.
PS. CKE - CKEditor / Centralna Komisja Egzaminacyjna ;p

ziggurad   11 #4 28.11.2010 21:12

Przydało by się porównanie z TinyMCE którego używam od zawsze ;)

Ale dzięki za informacje o czymś podobnym, można sprawdzić ;)

master_zonk6   7 #5 29.11.2010 12:19

Popraw linka do strony CKEditor

skandyn   9 #6 29.11.2010 12:41

@master_zonk6

Dziękuję za zwrócenie uwagi. Link już poprawiony.

Pozdrawiam.

  #7 30.11.2010 09:20

Fajne rozwiązanie, ale brakuje mi podświetlania składni (przejrzałem na szybko tylko CKEditor), są też problemy z wizualnym pogrubieniem tekstu, dlatego do szybkiej edycji wole Notepad++

  #8 30.11.2010 13:54

chrystusie... to jest edytor na stronę, z reguł do CMS'ów, a nie jako podstawowe narzędzie kodera.

  #9 01.12.2010 14:16

Nie każdy potrzebuje takiego edytora. Dobrym rozwiązaniem jest również WymEditor. Nie pozwala on na ustawianie własnych stylów przez piszącego post. Może za to mieć do wyboru kilka stylów - dzięki czemu strona nie wygląda jak choinka.
Dużym minusem CKEditora może być fakt, że nie obsługuje ona strict XHTML.

  #10 07.12.2010 00:55

mikolajs musze się z Toba zgodzić.. problem w tym, ze ludzie wklejają tam teksty z wordfa i innych stron i sie robi syf na stronie..