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ší?

Reklama

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?

Volná místa v IT

Reklama

Komentáře

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á :)

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

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?

Bylo by. Word samozřejmě s Drupalem funguje. Stačí zapnout modul Blog API a nastavit, do kterého typu obsahu budou příspěvky z Wordu odesílány. Viz Blogování, MS Word 2007 a Drupal.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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.

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

Je tam tlačítko Upload Image. Ale přesně už nevím.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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.

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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.

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

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

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

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

Díky - mám to tak.

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

Třeba do fckconfig.js. A opravte si tady v profilu URL - doplňte http.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

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

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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 :/

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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

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?

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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 :/

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?

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

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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.

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.

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

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Nevíte někdo, jestli jde udělat, ať se mi editor vklada jen, kam chcu a nepřekrývá mě všechny textarea ????

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.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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é

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.

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

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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.

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.

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

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

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

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ěď.  

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…

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Přidat komentář