@skandynDarmowy edytor na stronie internetowej

Darmowy edytor na stronie internetowej

27 listopada 2010, 20:11

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 i .

[code] Sample - CKEditor

Mój Edytor

[/code]

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 CKEditor CKSource Docs - The Official Documentation Site Developers Guide - FCKeditor

Pozdrawiam.