OnlioISO 9001:2008 certified

FCKeditor versus TinyMCE

Tvůrci webových redakčních systémů často stojí před rozhodnutím, jakým způsobem umožnit redaktorům, nevybaveným znalostí HTML kódování, vkládat do webů přehledně zformátovaný text, jehož kód bude zároveň validní. Vývojář v tuto chvíli pravděpodobně sáhne po jednom ze dvou nejznámějších open source wysiwyg editorů, určených pro editaci webu.

Nabídku dostupných editorů již dlouhodobě vedou dva z nich: FCKeditor (www.fckeditor.net) a TinyMCE (tinymce.moxiecode.com). Zmiňován je též editor Xinha (xinha.webfactional.com), nástupce kdysi velmi rozšířeného editoru HTMLArea. V současnosti však již při testování demoverze na domovské stránce projektu vykazuje chyby a za výše zmíněnými editory zaostává.

Vzhled editorů

Oba editory nabízejí velké množství kombinací vzhledu, základní vzhled vychází u obou ze starších verzí textového editoru MS Word. Ikony jsou v obou případech opatřeny bublinkovou nápovědou. U obou editorů lze jednoduše vypínat a zapínat jednotlivé pluginy (a tím i ikony), měnit jejich pořadí a sdružování do skupin, čímž je možno nastavit vzhled panelu nástrojů podle přání a potřeb uživatele. Oba editory umožňují přepnutí do maximální velikosti.
FCKeditor umožňuje skrýt panel nástrojů pomocí prvku na levé straně panelu.
TinyMCE nabízí stavový řádek s přehledem zanoření HTML tagů.

desc:TinyMCE toolbox

desc:FCKeditor toolbox

Formátování textu

Práce s oběma editory je prakticky shodná, editory pracují bez chyb a generují validní XHTML kód.
TinyMCE oproti FCKeditoru obsahuje funkce pro vložení aktuálního data a času. Zajímavou funkčností je také zapínání a přepínání vrstev.
FCKeditor umožňuje vkládat objekt DIV a přiřazovat mu vlastnosti pomocí předdefinovaných stylů.
Oba editory umožňují též nastavovat barvy textu a pozadí, přičemž TinyMCE umožňuje pracovat s širší barevnou škálou.

Kotvy a odkazy

Oba editory shodně umožňují umístit ve stránce kotvu se specifickým názvem, zadávaným uživatelem. Názvy všech kotev ve stránce se pak zobrazují v selectboxu při vytváření odkazu.
Oba editory mají velmi dobře propracovanou práci s odkazy. Umožňují vkládat odkazy se specifikací jejich cíle na kotvu, do rámů, do nového okna, i případné zavolání nového okna javascriptem.
FCKeditor oproti TinyMCE nabízí možnost vytvořit odkaz na e-mail. Dále umožňuje práci se soubory a jejich upload na webový server.
TinyMCE pro práci se soubory nabízí doplňkový plugin, který je však potřeba dokoupit.

Tabulky

TinyMCE

desc:TinyMCE vložení tabulkydesc:TinyMCE menu tabulkyPráce s tabulkami v editoru TinyMCE není z uživatelského hlediska bez problémů, po vložení tabulky se zobrazí tabulka v podobě, která je zobrazena na následujícím obrázku.

Uživatel pak musí do jednotlivých buněk nejprve umístit kurzor, což se při této velikosti neobejde bez potíží. Rovněž styl rámečku není z nejzdařilejších. Po kliknutí na tabulku pravým tlačítkem myši se zobrazí menu pro další práci s tabulkou, kde je již vše bez problémů.
Uživatel má možnost využít také ikony v panelu nástrojů, které spouštějí stejné funkčnosti, jako menu zobrazované po kliknutí pravým tlačítkem myši.

FCKeditor

desc:FCKeditor vložení tabulkyVe FCKeditoru se po vložení zobrazí tabulka v následující podobě, viz. obrázek. Pro další práci je tato podoba vhodnější, rovněž další práce s tabulkou, zejména dělení a slučování buněk, je zde přívětivější.
Editor bohužel nemá více ikon v panelu nástrojů, což může uživatele, který není poučen o funkci pravého tlačítka myši, zmást a znemožnit mu další práci.

Obecně je práce s tabulkou u obou editorů poměrně obtížná a řada funkcí pro práci s tabulkami chybí. Chybí možnost nastavit barvu a styl rámečku na úrovni tabulky.

Obrázky

Práce s obrázky je opět v obou editorech téměř shodná. Editory umožňují vložit obrázek do textu, nastavit jeho obtékání a podobně. Hlavním rozdílem je skutečnost, že TinyMCE v základní verzi nenabízí možnost uploadu obrázku na server a je nutno tento plugin dokoupit.

Vkládání textu z MS Word

Jeden z hlavních postupů při vkládání textů na web je bezesporu kopírování textů z editoru MS Word.
Při klasickém vložení textu a jeho převedení do HTML kódu editorem zůstává v tomto kódu formátování, které se přenese z Wordu. Kód je pak nevalidní a několikrát větší nežli čistý HTML kód. Často je přenášené formátování i příčinou kompletního rozpadu stránky. Oba zmiňované editory mají proto funkci Vložit z Wordu.

TinyMCE

Editor si s tímto úkolem poradí velmi dobře, kód po vložení většinou neobsahuje zbytečné HTML tagy, i když při testování se nám již několikrát podařilo najít formátování, které nebylo odstraněno. V některých případech by mohla být na závadu skutečnost, že jsou smazány také barvy písma.  

FCKeditor

Tento editor nepřevádí kód dobře, na všech pozicích ponechá tagy <font> se všemi jejich atributy. Tagy nadpisu <h1> až <h6> převádí na sekvenci <div><b>< font size> a tagy odstavců <p> převádí na <div>.
Jediným řešením je zde text nejprve uložit jako TXT, pak vložit do FCKeditoru a znovu zformátovat.

Shrnutí

V následujícím hodnocení je maximální počet bodů 100, můžeme to považovat za 100% vyhovění uživateli.

 

FCKeditor

TinyMCE

Poznámka

Formátování textu

100

100

Oba editory jsou na stejné úrovni.

Odkazy a kotvy

100

100

Odkazy řeší oba editory dobře.

Tabulky

50

50

Oba editory jsou na stejné úrovni. Práce s tabulkami je obtížná.

Obrázky a soubory

100

50

FCKeditor umožňuje i v základní verzi upload obrázků a souborů na server.

Práce s textem z Wordu

10

75

TinyMCE na rozdíl od FCKeditoru kód skutečně vyčistí od zbytečných tagů. Maže však i barvy písma.

Pokud uživatel ve velké míře pracuje s wordovskými texty, které pouze do editoru vkládá, a dokáže oželet možnost uploadu souborů na server nebo ho řeší jinak, pak je lepší volbou TinyMCE.
Pokud tomu tak není, je lepším řešením FCKeditor.


28. 1. 2009 Autor: Zdeněk Tábor

Seznam dalších článků