TinyMCE vs FCKeditor

Na webu se často setkáte s editory, které umožňují vkládání obsahu skoro stejně pohodlně, jako kdybyste jej psali v textovém editoru v počítači. Nejčastěji se vyskytuje zřejmě dvojice FCKeditor a TinyMCE. Přestože existuje celá řada dalších, více či méně zdařilých WYSIWYG editorů pro web, možností těchto dvou zřejmě v nejbližší době nedosáhnou. Jsou oba stejně dobré, nebo je některý pro váš web vhodnější?

Přiznám se, že od začátku, kdy jsem se začal kamarádit s open source redakčními systémy (Joomla, po chvíli Drupal a později i WordPress), vnímal jsem jako jednoznačně nejlepší vizuální editor pro web FCKeditor. Jeho nastavení je bezproblémové, velmi dobře se mění jeho chování pomocí konfiguračních souborů, nabízí několik motivů vzhledu a nabízí rychlé přepínání mezi vizuálním a HTML režimem.

Jenže poslední dobou začínám mít pocit, že tam, kde s webem pracují nepozorní, neschopní nebo neznalí uživatelé, je TinyMCE jako vizuální editor vhodnější volba. Vedou mě k tomu zkušenosti s provozem webů Photo HowTo a Backup HowTo, na které mi články dodávají externí autoři. Naučit je správně používat vizuální editor v kombinaci s importem textu z Wordu se mi donedávna zdálo jako téměř neřešitelný problém.

FCKeditor

Můj první favorit FCKeditor nabízí jednoduché prostředí připomínající vzhled staršího Wordu nebo jakéhokoli textového editoru. Na webu jej zprovozníte za pár minut. Aktuální verze již fungují ve všech běžně používaných webových prohlížečích. Podporuje formátování pomocí CSS, jeho výstup je validní XHTML, dovede automaticky zjistit vkládání textu z Wordu (nebo jiného richtext editoru), obsahuje správce souborů pro snadný výběr obrázků a jiného vkládaného obsahu. Dovede pracovat s tabulkami, formuláři atd.

V Drupalu je tento editor možné nainstalovat pomocí potřebného modulu. Podobně jej lze implementovat i v systému Joomla. Aktuální verze modulu pro Drupal (zkoušeno s modulem pro Drupal 6) toho nabízí o trochu více, než modul pro TinyMCE, i když to dříve bylo spíše naopak. Nastavení obou modulů je v podstatě stejné.

FCKeditor
FCKeditor – vizuální režim

FCKeditor dovede importovat text z Wordu buď automaticky, nebo pomocí speciální funkce zobrazující dialog pro vložení textu ze schránky. Tam si můžete zapnout očištění vloženého obsahu od stylů, které Word iniciativně přikládá. Bohužel nevýhoda je ta, že FCKeditor při takovém importu neodstraňuje formátovací znaky HTML, jako je třeba FONT. Pokud autor článku připraví text ve Wordu a mezinadpisům nastaví nějaké šílené formátování, pak počítejte s tím, že se toho při importu do FCKeditoru nezbavíte. HTML značka FONT v kombinaci s nastavením velikosti písma znemožní aplikovat styly se vzhledem, které máte pro web připraveny.

FCKeditor
FCKeditor a nedokonalý import textu zkopírovaného ze stránky

Samozřejmě zkušený člověk se v FCKeditoru přepne do HTML režimu a vše si pečlivě upraví, případně text připravuje v něčem jiném než ve Wordu. Ovšem ne každý je ochoten či schopen takto postupovat. Toto je tedy podle mého názoru zásadní nevýhoda FCKeditoru.

TinyMCE

Vizuální editor TinyMCE je šířen sice pod trošku jinou licencí, než FCKeditor, nicméně i tak je zdarma. Nabízí množství témat a zásuvných modulů. Když jsem tuto jeho vlastnost zkoumal podrobněji, byl jsem docela překvapen, jaké různé doplňkové moduly lze pro TinyMCE najít. Opět, stejně jako v případě FCKeditoru, se nabízí XHTML výstup, podpora různých jazyků i fungování v různých prohlížečích (Safari momentálně experimentálně).

TinyMCE
TinyMCE – vizuální režim

TinyMCE najdete v celé řadě redakčních systémů. Pro Drupal použijte příslušný modul. TinyMCE najdete také v Joomla, WordPressu a desítkách dalších, viz seznam. Pro Drupalisty mám dobrou zprávu. TinyMCE už spolehlivě funguje i v šestce, byť s mírnými ALE. Především je nutné vypnout kompresi JavaScriptu, což se projeví v rychlosti načítání stránek u navštěvovanějších webů. Aktuální verze modulu nemá tolik nastavení jako FCKeditor. Nemůžete například určit minimální počet řádků pro políčka, která mají být nahrazena tímto editorem. Několikrát se mi také stalo, že TinyMCE při editaci článku do obsahu dvakrát zkopíroval úvodník.

TinyMCE

TinyMCE z textu automaticky odstraní zbytečné značky (není tu DIV navíc jako u FCKeditoru)

TinyMCE má však jednu výbornou vlastnost, kvůli které jsem ho na svých dvou zmíněných webech nasadil. Import text u z Wordu zvládá totiž způsobem, který přesně potřebuju. Ať už si pro mezinadpisy zvolím jakkoli šílený styl, TinyMCE jej pomocí speciální funkce vloží bez zbytečností jako je FONT, milionkrát opakovaný SPAN atd. Pokud si text článku ve Wordu připravíte tak, že budete správně tvořit odstavce (bez prázdných řádků mezi nimi) a pro mezinadpisy použijete styly (Nadpis 2, Nadpis 3 atd.), pak po vložení textu do TinyMCE budete mít minimum práce s jeho úpravami.

To je poměrně kritická vlastnost. Tam kde nechcete nebo nemůžete neustále kontrolovat, zda je text bez formátování, které přebije nastavené kaskádové styly, tam je momentálně ideální příležitost pro implementaci TinyMCE.

Vaše zkušenosti?

Ve své knize o Drupalu jsem věnoval mnohem více prostoru FCKeditoru oproti TinyMCE. Stále si myslím, že FCKeditor je schopnější, rychlejší a robustnější, než TinyMCE. Avšak rozdíly se začínají stírat, a pokud vývojáři vylepší nastavení modulu pro TinyMCE, budu doporučovat jej.

Pokud bych však měl srovnat aktuální FCKeditor s TinyMCE bez ohledu na to, jak fungují v Drupalu nebo jiném prostředí, pak by zřejmě vyhrál TinyMCE.

Jaký vizuální editor používáte na svém webu? Dáváte přednost přípravě textu v HTML nebo jste rádi, že je nějaký vizuální editor k dispozici?

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Import dokumentu z Wordu do FCK je hrůza, navíc hrozně mrší kód. Už jsem si zvykl u delších věcí si to pěkně připravit v PSPadu a jen vložit zdroják, ale když to znovu otevřu, je to celé zmatené. Navíc je pro FCK asi jediný použitelný browser Firefox (tuším, že mi ještě dobře běžel Konqueror). Opera se nějak nechytá (ani 9.5, i když by myslím měla), IE7 mi zase nezobrazuje celý kód (u běžných věcí ano, u videí vložených přes object tag se to nějak sere :/)

Kontrola pravopisu pomocí slovníků třeba z OpenOffice.org by taky nebyla marná :)

Profile picture for user Jan Polzer

No mě FCKeditor funguje spolehlivě ve FF, IE i Opeře - tedy jeho nejnovější verze. Nevím, kdy se to vyřešilo, ale je fakt, že ve starší byl problém se stabilitou poté, co se do editoru vložil text z Wordu.

Mimochodem, ještě mě napadlo, že je u FCKeditoru rozdíl mezi importem z Wordu v IE7 a IE6 a ve Firefoxu.

návštěvník

FCK se mi teď (nevím jak) podařilo zprovoznit i s Operou 9.5. Co je dobré, že ta poslední verze pro Drupala 5 už nemrší kód (nesráží jej dohromady, udržuje rozumné formátování zdrojáku). Naopak mě začíná ale štvát import z Wordu, který byl u předchozí verze lepší. I když mám DOCX dobře nastylován (odstavcové styly, mezinadpisy správné úrovně), tak se mi H3 naimportuje (vložit z Wordu) s něčím jako SPAN, DIV nebo FONT a místo odstavců P jsou dvakrát BR.

Kontrola gramatiky ve Firefoxu neexistuje (je tam jen jednoduchý slovník), takže psaní článků ve Wordu se často hodí. Takto člověk musí dělat mezikroky přes notepad či pspad, anebo naimportovat do FCK, zkopírovat do PSpadu, pročistit přes Tidy a zase vložit.

–––––––––––––––––––––
http://www.extrahardware.cz

návštěvník

Dobrý den,

náhodou jsem zabrousil na tyto stránky. Nebylo by řešení, pokud tedy je nutné využít word, rovnou to poslat jako článek ke zveřejnění do Drupalu?

návštěvník

Prosim, ako sa da pekne riesit vlozenie obrazkov do stranky?
uzivatel sa prihlasi a nejake rozhranie na to.

pre text je v pohode napr fckeditor, ten dokonca dokaze aj obrazok vlozit, ale ten obrazok musi byt nikde na webe, vklada sa cez URL do fckeditora, toto funguje v pohodke.

ale ja potrebujem to iste, nieco ako fckeditor, ale obrazok budem mat na disku a potrebujem ho nahrat z disku na web.

snad chapete, ako na to ? urcite na to existuje vela aplikacii, ktore ho nahraju niekde do adresara na server a potom len zobrazia.

Profile picture for user Jan Polzer

Jasně, toto je jednoduše řešitelné. Přímo FCKeditor i TinyMCE umí obrázky uploadovat na web.

Pokud používáte redakční systém Drupal, pak si doinstalujte modul IMCE, který nabízí opravdu komfortní nahrávání obrázků na web a jejich následné vkládání v editoru.

Viz video a návod.

návštěvník

a ako sa to robi?
ja nepouzivam drupal ani ziadny iny CMS.
ja som si nainstaloval fckeditor do webu, funguje v pohode, vkladam text, formatujem, viem vlozit obrazok z URL.
takze ako fck editor uploaduje obrazok na web ? je tam nejake ine tlacitko na to ?
dakujem

návštěvník

Dobrý den,

rád bych se zeptal jak to je s licencí i FCK editoru a Tiny. Například když tvořím web pro zákazníka, tak je-li možné tam bezplatně zahrnout tyto editory. Někde jsem četl, že se na to licence nevztahuje a musí se platit.

Profile picture for user Jan Polzer

Dobrý den, obojí je k dispozici pod LGPL licencí, CKeditor navíc pod GPL a MPL. Takže můžete je bez obav dát do produktu, který pak prodáte zákazníkovi. Jen by samozřejmě měl mít přístup ke zdrojovému kódu. Pokud tedy JavaScripty těchto editorů nezakódujete, nevidím v tom problém. Podrobněji viz jejich weby.

návštěvník

http://smiesko.pilsfree.net/wiki/index.php/Test_editor%C5%AF

Profile picture for user Jan Polzer

Pěkné, díky za odkaz. Škoda, že tam nejsou zmíněny verze testovaných editorů.

návštěvník

dik za připomínku, tiny 3, xena 0,95 a fck 2.51 - estli bude čas, tak zkusim ještě 2.6 měla by dopadnout líp.

návštěvník

Prosím o radu - jak zruším v TinyMCE HMTL entity?
Díky,
r.

návštěvník

Odvolávám, co jsem přivolal - už to normálně funguje s UTF :)

návštěvník

entities : "160,nbsp",
entity_encoding : "named"

je to lepší než entity_encoding : "raw",
protože to to vyplňuje prázdný tagy tvrdou mezerou.

návštěvník

Díky - mám to tak.

návštěvník

A kam tohle mám napsat? Potřebuji se toho zbavit, prošel jsem hafo stránek ale podrobně vysvětlené nikde.

návštěvník

Zprovoznil jste někdo u těchto editorů kontrolu češtiny?

Profile picture for user Jan Polzer

V FCKeditoru a Firefoxu je to bez problémů. Pro IE se musí doinstalovat podpora kontroly pravopisu do počítače.

návštěvník

Děkuji. Podařilo se vám to pomocí nějakého pluginu nebo přepnutím do textového módu a použití pluginu pro FF pro kontrolu češtiny? Pro Xenu, FCK i Tiny existují pluginy na kontrolu pravopisu, ale žádný se mi nepodařilo rozběhat, kvůli diakritice :/

Profile picture for user Jan Polzer

Přepnutí do zdroje (viz info) je osvědčené, nicméně kontrola pravopisu ve Firefoxu funguje v FCKeditoru i v jeho vizuálním režimu - jen je třeba zapnout v souboru fckconfig.js volbu FCKConfig.FirefoxSpellChecker = true;. Standardně je tam false, čili je to vypnuto.

návštěvník

Do testu jsem doplnil závěr :) Prosím, kdo si jej přečtete, pošlete mi svoje připomínky, názory, děkuji. Má-li někdo zájem o ještě delší text o editorech Xinha, FCKEditor, TinyMCE, Spaw, Wymediator a Textila mohu poslat mailem.
http://smiesko.pilsfree.net/wiki/index.php/Test_editor%C5%AF

Profile picture for user Jan Polzer

Dobrá práce, jen mi tam ještě chybí něco o dostupnosti rozšiřujících komponent a podpoře ze strany open source redakčních systémů, jako je WordPress, Drupal, Joomla nebo DotNetNuke. Nebo jsem to přehlédl?

návštěvník

Podpora CMS není hodnocena. Rozšiřující moduly, pokud myslíte pluginy do jednotlivých editorů. Ty co se mi líbily a přišly mi užitečné jsem do editorů nainstaloval a jejich přítomnost se v testu více či méně promítá, editory jsem také optimálně nastavil. Jediné co mi pořád nejde, je rozchodit kontrolu češtiny, ani v jednom editoru, vyžadují CGI na serveru a to mi ne a ne rozchodit. V Xeně mi to správně opravuje jen slova bez diakritiky, tak problém bude někde tímdle směrem :/

návštěvník

Vyzkoušel jsem poměrně nový modul Wysiwyg API, kvůli TinyMCE, protože na stránkách projektu TinyMCE odkazují na tento modul. Tento modul si u mě nese takový problém, že mění textová pole (text area) na statickou velikost - tzn. není na spodu okna (např u komentářů) ten jezdec (grippie), kterým je možné okno zvětšit. Nesetkal jste se s tím někdo?

Profile picture for user Jan Polzer

Jakou používáte verzi toho WYSIWYG API? Myslím, že některá z prvních to dělala. Já mám 2.x a ta je v pohodě.

návštěvník

Používal jsem stabilní verzi 1.1 a vyzkoušel jsem i 2.x dev a problém je stejný. Stačí jen když aktivuji modul a textarea u komentářů je statické velikosti.

návštěvník

Pokud ale ve Wysiwyg API přiřadím vstupnímu formátu Filtered HTML editor TinyMCE, tak se jezdec u okna komentářů ukáže, ale zároveň se zobrazí i přepínač "Enable rich-text", který TinyMCE stejně nespustí, protože jen tam Filtered HTML. Když přiřadím k Filtered HTML žadný editor (No editor), tak se z toho okna stane statické. Dělají mi to obě verze Wysiwyg API.

Profile picture for user Jan Polzer

Hm :-( Holt je to ještě poměrně nový modul, který je stále ve vývoji a ladění chyb...

Profile picture for user Jan Polzer

U FCKeditoru to šlo specifikovat, u TinyMCE a WYSIWYG API to nejde. Doporučuji ho používat tak, že se načte skrytý s odkazem Enable rich-text. Editor se pak zobrazí až po stisku tohoto odkazu a neovlivní ostatní textarea.

návštěvník

To jde udělat takto:

elements : "kratky",

Do položky vypíšete elementy, na kterých chcete použít tiny_mce ted nevím jestli u textarey má být nastavené id nebo name s tímto názvem, bo já dávám obě stejné

návštěvník

Jde mi to, aby TinyMCE ignorovalo cokoli mezi "[raw]" až "[/raw]", bohužel nikde nemůžu najít odpověď.

Jinak se po zkušeností si FCK připojuju k názoru, že pro uživatele je lepší TinyMCE.

Profile picture for user Jan Polzer

Jak u TinyMCE obecně, nevím. V Drupalu při kombinaci TinyMCE a modulu WYSIWYG (ve verzi wysiwyg 6.x-2.x-dev) by k tomu možná šly využít některé class, které znemožňují editoru manipulovat s obrázky. Viz http://drupal.org/node/400482

návštěvník

Prosim, ako sa da pekne riesit vlozenie obrazkov do stranky?
uzivatel sa prihlasi a nejake rozhranie na to.

pre text je v pohode napr fckeditor, ten dokonca dokaze aj obrazok vlozit, ale ten obrazok musi byt nikde na webe, vklada sa cez URL do fckeditora, toto funguje v pohodke.

ale ja potrebujem to iste, nieco ako fckeditor, ale obrazok budem mat na disku a potrebujem ho nahrat z disku na web.

snad chapete, ako na to ? urcite na to existuje vela aplikacii, ktore ho nahraju niekde do adresara na server a potom len zobrazia.

návštěvník

Včera jsem nainstaloval na testovací web podle tohoto návodu http://mustardseedmedia.com/podcast/episode29 a dost se mi to líbí. Jenom jsem musel upgradeovat fckeditor, tj. místo fck modulu dát na web modul wysiwyg - tedy použít ten nový modernější způsob instalace editoru. Pak to začalo teprve fungovat.

návštěvník

Dobrý den,

chtěl bych se zeptat, jestli někomu funguje kontrola pravopisu v TinyMCE. Já to nemohu přes spell_checker za boha rozchodit. U google library předpokládám, že čeština nejde nastavit u PSpell by to mohlo jít, zndálivě to i opravovalo, ale když jsem vymyslel složitější překlepy, tak jsem zjistil, že to prakticky nic nevyznačí k opravení.

 

Proto se ptám, zda jsem jediná komu to nejde. Díky

Profile picture for user Jan Polzer

Taky mi nejede, ale ani jsem se ji rozchodit nesnažil. Stačí mi, když se editor vypne, tak kontrola obsažená ve Firefoxu.

návštěvník

Zajímalo by mne, jaký je Váš názor na zmíněné editory dnes, s pětiletým odstupem. Už nastala doba k doporučování TinyMCE, jak píšete v závěru článku? Připravuji článkový web (s množstvím ilustrací), nainstaloval jsem moduly Wysiwig a IMCE, ale jsa bez zkušeností, neumím se rozhodnout ve věci vizuálního editoru. O Drupalu vím jen to, co jsem dokázal pochopit z Vašich stránek a z Vašich tří knih (nebo jste jich napsal o Drupalu víc?). Co byste mi doporučil dnes? Děkuji za odpověď.  

Profile picture for user Jan Polzer

Pěkné :-) Na tento článek jsem už dávno zapomněl. Po pravdě řečeno, dnes to vidím přesně obráceně. Dávám přednost TinyMCE, u Drupalu v kombinaci s modulem Wysiwyg. Hlavně tedy proto, že pro TinyMCE umím programovat doplňková tlačítka a pluginy. Mimochodem, v Drupalu 8 bude integrován CKeditor...

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru