WYSIWYG editor TinyMCE
Už skoro rok používám tento vynikající WYSIWYG editor. Proto jsem se rozhodl se se všemi čtenáři blogu podělit o moje zkušenosti s tímto editorem. V plánu je pár zajímavých článků o tomto editoru. Dneska se pokusím vysvětlit co to je WYSIWYG editor a integraci TinyMCE do HTML.
WYSIWYG je zkratka, která označuje způsob editace dokumentů v počítači, při kterém je verze zobrazená na obrazovce vzhledově totožná s výslednou verzí dokumentu.
Nejčastěji se jako WYSIWYG označují některé textové procesory, ve kterých se editovaný text zobrazuje tak, jak bude vytištěn na papír. Kvůli obtížnosti tohoto úkolu dochází ovšem často k drobným chybám, kdy uživatel „nedostane, co vidí. Příkladem editorů pracujících v režimu WYSIWYG je např. Microsoft Word či Open Office.org Writer nebo WYSIWYG editory WWW stránek.
WYSIWYG při tvorbě webu
Praxe je taková, že pro většinu klientů bývají WYSIWYG editory lepší volbou, než marná snaha o pochopení značek HTML. WYSIWYG editory si s sebou nesou určité břímě, v podobě častých chyb ve výsledném značkovacím kódu, a to jak z hlediska syntaxe, tak sémantiky.
Tvůrce nebo implementátor redakčního systému by v případě WYSIWYG editorů měl myslet především na dva důležité body:
- Vybrat pro implementaci vhodný WYSIWYG editor (o tomto problému budu psát někdy příště).
- Případně omezit možnosti WYSIWYG editoru, aby v něm měl uživatel pouze vybrané formátovací možnosti, které omezí jeho přílišnou kreativitu (také příště).
Dnes se zaměřuji na WYSIWYG editor TinyMCE o kterém se budu na tomto webu párkrát zmiňovat. TinyMCE patří mezi ty lepší editory, tzn. mezi ty, kteří se snaží dodržovat určité standardy (XHTML).
V první řadě si musíte stáhnout editor TinyMCE ze jeho oficiálních stránek http://tinymce.moxiecode.com. Postupně si stáhněte editor a češtinu, ta se označuje jako CS. Po stažení rozbalte TinyMCE a češtinu do složky.
Proto aby se správně TinyMCE integroval do HTML stránky je potřeba udělat pár jednoduchých kroků.
- vytvořit HTML objekt textarea,
- načíst TinyMCE,
- nakonfigurovat ho.
Nyní je potřeba si spustit nějaký editor textu (PSPad, notepad) ve kterém budete psát HTML kód. Ve složce, kde je rozbalený WYSIWYG editor TinyMCE, vytvořte index.html. Ten si poté spusťte v editoru textu. Vytvářený HTML kód bude hodně jednoduchý (nebereme zde v úvahu hlavičky a další potřebné tagy).
<html> <body> <textarea></textarea> </body> </html>
Soubor uložíme a otevřeme ve webovém prohlížeči (Internet Explorer, Firefox, Opera, ...). V prohlížeči vidíme vytvořené pole pro psaní textu (Tag textarea). Tím máme první krok hotový.
Teďka přejdeme na druhý krok - načteme TinyMCE do námi vytvořeného souboru. K dosavadnímu textu přidáme:
<html> <head> <script language=javascript type=text/javascript src=./tinymce/jscripts/tiny_mce/tiny_mce.js></script> </head>
Celý text bude vypadat takto:
<html> <head> <script language=javascript type=text/javascript src=./tinymce/jscripts/tiny_mce/tiny_mce.js></script> </head> <body> <textarea></textarea> </body> </html>
Když soubor uložíme a podíváme se na výsledek ve webovém prohlížeči uvidíme že se nic nestalo. Přesto máme krok 2 hotový.
Krokem 3 je konfigurace TinyMCE (zde je možné nastavovat nespočet důležitých i naprosto zbytečných parametrů). My si dneska ukážeme jen to nejdůležitější!
K dosavadnímu textu přidáme:
<script language=javascript type=text/javascript>
tinyMCE.init(
{ mode : textareas, language : cs });
</script>
Celý text bude vypadat takto:
<html>
<head>
<script language=javascript type=text/javascript
src=./tinymce/jscripts/tiny_mce/tiny_mce.js></script>
<script language=javascript type=text/javascript>
tinyMCE.init({
mode : textareas, language : cs
});
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>>
Soubor uložíme a obnovíme webový prohlížeč. Pokud došlo ke změně - gratuluji! Nyní vidíte WYSIWYG editor TinyMCE v jeho základním zobrazení.
Některé texty převzaty z http://blog.h1.cz/qa-jaky-pouzit-wysiwyg-editor/
Příspěvek vložen: 2008-07-10 21:25:07, autor: Citanek
Vas navod me vubec nefunguje objevi se pouze text area tod vseReagovat
Příspěvek vložen: 2008-07-10 21:00:20, autor: Citanek
Poradi me nekdo jak to napojit aby obsazeny text v Editoru, sel zasilat do Databaze ?Reagovat
Příspěvek vložen: 2008-03-07 00:15:48, autor: Libor
Prosim Vas, jak jde nastavit TinyMCE tak aby se zobrazovala i v Internet Exploreru a tak aby v nem fungovala cestina ?Dekuji
Reagovat
Příspěvek vložen: 2008-03-08 15:00:14, autor: HarvyM
TinyMCE verze 2.x funguje ve všech prohlížečích. Nevím jak je to s novou verzí. Zatím jsem ji netestoval.Reagovat
Příspěvek vložen: 2008-03-14 21:54:12, autor: Libor Vyhnánek
DěkujiReagovat
Příspěvek vložen: 2007-12-16 12:48:39, autor: Rae
Podle tohoto článku Tiny nerozchodí nikdo. Jen ten kdo tomu rozumí. Autor má totiž překrásné chyby v syntaxi ;-).Reagovat
Příspěvek vložen: 2007-12-28 09:03:53, autor: HarvyM
más pravdu, bohužel chyba vznikla na straně TinyMCE, které tady používám. Došlo k odstranění uvozovek! :(Reagovat
Příspěvek vložen: 2008-02-19 22:53:46, autor: nick519
Takže Tiny mce nakonec není tak dokonalá že?Reagovat
Příspěvek vložen: 2008-02-19 22:53:36, autor: nick519
Takže Tiny mce nakonec není tak dokonalá že?Reagovat
Příspěvek vložen: 2008-03-08 14:59:08, autor: HarvyM
Záleží jak máte TinyMCE nastaven, veškeré jeho vlastnosti jsou jen o nastavení!Reagovat
Příspěvek vložen: 2007-12-08 17:22:31, autor: Marek
Nevim proc mi nefunguje toto:<script language=javascript type=text/javascript>
tinyMCE.init(
{ mode : textareas, language : cs });
</script>
jedine co funguje je:
<script language=javascript type=text/javascript>
tinyMCE.init(
{ mode : \"textareas\" });
</script>
pokud chci zapnout advanced mode, tak to taky nejde:
<script language=javascript type=text/javascript>
tinyMCE.init({
mode : \"textareas\",
theme : \"advanced\"
});
</script>
Poradi nekdo prosim? ICQ 176210740
Reagovat
Příspěvek vložen: 2007-12-28 09:04:08, autor: HarvyM
píšu tiReagovat
Příspěvek vložen: 2007-09-28 22:21:38, autor: Hunary
No prave, okopirovali a kdyby jeden odstavec, podivej se poradne Michale. To si nemuzes nechat libit prece ...To se nedela krast nekomu texty a ani neuvest puvod a autora ... mel bys to nejak resit
Reagovat
Příspěvek vložen: 2007-09-27 20:15:41, autor: mthu
To jo, a dokonce nafejkovali datum, aby to vypadalo, ze je to z dubna :-)Reagovat
Příspěvek vložen: 2007-09-27 20:22:32, autor: Hunary
nejaka H1 ... nikdo to nezna a uz si vyskakujou :)Reagovat
Příspěvek vložen: 2007-09-27 16:17:13, autor: Hunary
Koukej na ty smejdyhttp://blog.h1.cz/qa-jaky-pouzit-wysiwyg-editor/
Kopirujou od Tebe a ani neuvedou zdroj ... Vetsi luzu snad ani neznam ... Mel bys to nejak resit Michale, to si precet nenechas libit
Reagovat
Příspěvek vložen: 2007-09-28 17:29:14, autor: HarvyM
Nějak nechápu, jediné co je tam \"stejné\" je jeden odstavec?Reagovat