Becsapós ez a név, hogy TinyMCE ugyanis az ember ha nem ismeri a terméket, akkor valami kis dologra gondol, mondjuk egy 5-6 funkciós szerkesztőre, egyszerű felületre stb. Midezek helyett egy nagyon komoly vizuális szövegszerkesztő áll a háttérbe, amely jelenleg igencsak nagy szeletet magáénak tudhat a saját “kis” piacából.
Mielőtt elkezdtem volna írni a bejegyzést, le szerettem volna tölteni a szóban forgó terméket és természetesen tinymce . com – on kerestem, azonban ott egy ronda parkoltatott oldal jelent meg. Aztán jött a Google és kiderült, hogy a hivatalos oldal a www.tinymce.moxiecode.com. Talán megérdemelne egy saját domain nevet ez a szoftver, főleg, hogy olyan sokan használják.
A weboldalukkal egyébként nincs gond, könnyen meg lehet találni a letöltés linket, meg dokumentáció is van jócskán. Az igaz, hogy csak angolul, de nagyon csodálkoznák, ha találnák olyan szerkesztőt, amely magyar leírást is kínál. Letöltés előtt kipróbálhatjuk a TinyMCE -t és ha elakadnánk akkor ismét csak angolul segítséget kérhetünk az erre a célra fenntartott hivatalos fórumon.
Jelenleg a 3.2.5 -ös verziónál tartanak és elérhető hivatalos magyar fordítás hozzá. A honlapjukról letölthető PHP, .NET, ColdFusion és JSP nyelveken megírt szerver oldali feldolgozó script, azonban gond nélkül integrálni lehet az összes többi szerveroldali nyelven megírt rendszerbe is.
Letöltés és kicsomagolás után egy tinymce mappába van bepakolva a teljes rendszer. Az examples mappába találunk néhány példát, amelyel segíteni próbálnak nekünk a “tájnemcí” használatában. Ezt csak akkor nevezhetnénk sikeres próbálkozásnak, ha a fejlesztő/felhasználó egy gyengéd mozdulattal lenyomja a CTR+U billentyűkombinációt és kimásolja a forrásból a megfelelő kódokat ugyanis a példákból kimaradt egy apró részlet, mégpedig a leírás. Helyette gyönyörködhetünk a működő felületbe.
Ezt meg is tehetjük, ugyanis a felhasználói felület valóban szépen ki van alakítva, a sok funkció ellenére is átlátható, esztétikus és könnyen használható. Alapból négy téma elérhető a TinyMCE -hez, azonban viszonylag könnyen igényeinkre szabott, saját témát is készíthetünk hozzá. Ennek a legegyszerübb módja, az alap téma mappájába (/jscripts/tiny_mce/themes/simple) a fájlok felülírása és a css fájlok szerkesztése.
A TinyMCE használata
A gyakorlati felhasználásra kerülő fájlok a /jscripts/tiny_mce/ mappában találhatóak, ezek közül a számunkra legfontosabb, a tiny_mce.js fájl, ugyanis ezt kell az összes olyan oldalba meghívni, amelyen használni szeretnénk a szerkesztőt.
| javascript | | copy code | | ? |
| 1 | <script src="tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"><!--mce:0--></script> |
A fájl meghívása után előszőr a head részbe célszerű létrehozni a tinyMCE beállítására szolgáló tömböt, amely alap esetben a tinyMCE.init névre hallgat. A tömb felépítése a következő:
<script language=”javascript” >
tinyMCE.init({
paraméter : “paraméter értéke”,
});
</script>
Itt található a legfontosabb paraméterek listája, a lehetséges értékekkel:
| Paraméter | Értékek | Magyarázat |
| elements | string | A szövegmező neve |
| theme | advanced, simple, stb. | A téma mappájának neve (./theme/*) |
| plugins | table,save,emotions stb. | A használni kívánt kiegészítők mappája (./plugins/*) |
| content_css | css/content.css | A szerkesztőablak tartalmának formázása css-ből. |
| theme_advanced_buttonsN | table,save,emotions stb. | Az eszköztár mely sorában, milyen gombok jelenkenek meg? ( az N eleme (1…4) intervallumnak) |
| theme_advanced_toolbar_location | top,bottom | Az eszköztár hol jelenjen meg ? |
| theme_advanced_toolbar_align | left,center,right | Az eszköztár gombjainak igazítása balra, középre vagy jobbra. |
| theme_advanced_statusbar_location | top,bottom | A statusbar hol jelenjen meg ? |
| theme_advanced_resizing | true,false | A szerkesztő ablak átméretezése |
A lista tényleg csak a legfontosabb paramétereket tartalmazza, érdemes az example mappába található példa fájlok forrásából ihletet meríteni, hogy hogyan is kell beállítani a dolgokat.
Az alap beállítások elvégzése után az oldalunk BODY részébe egyszerűen létre kell hoznunk egy szövegmezőt, amelynek a neve meg kell hogy egyezzen az elements paraméter értékével. Ha ezt meg tettük, akkor a szövegmező automatikusan átalakul TinyMCE szövegszerkesztővé.
Betöltődési idő
10 mérést végeztem localhoston és ugyancsak 10 -et egy távoli szerverről betöltve a tinyMCE -t. Mindkét esetben ugyan abba az üres HTML oldalba volt beillesztve a script. Az átlagos betöltődési idő lehető legreálisabb meghatározásához előbb kiszámoltam a localhostos átlagot, majd a távoli szerveres átlagot és a végső eredményt ennek a két átlagnak a számtani középarányosából kaptam. Az idő méréséhez a Firebugot használtam.
| # | Localhost (sec) | Távoli szerver (sec) |
| 1. | 6.46 | 6.91 |
| 2. | 6.25 | 10.24 |
| 3. | 6.8 | 9.38 |
| 4. | 8.05 | 24.2 |
| 5. | 8.51 | 8.69 |
| 6. | 6.37 | 8.66 |
| 7. | 7.44 | 7.68 |
| 8. | 7.15 | 7.91 |
| 9. | 9.95 | 7.25 |
| 10. | 7.65 | 9.44 |
| ~ |
7.46 | 10.03 |
Az átlagos betöltődési idő 8.74 másodperc. Természetesen ez alatt nem azt kell érteni, hogy 8,74 másodpercig fogunk fehér képernyőt látni és csak utána jelenik meg a szerkesztő, hanem az összes szükséges fájl letöltését értjük ez alatt. Az eredmény csak informativ jellegű és a sorozat végén felállított WYSIWYG toplistába lesz komolyabb jelentősége.
A HTML kimenet igen csak szép, W3C szabványokat tisztelebne tartó kód, tehát nyugodt lelkiismerettel lehet használni olyan weboldalak tartalomkezelő rendszerébe is a szerkesztőt, amelyek feltétlenül valid HTML -t kell produkáljanak.
Elérhető funkciók tekintetében sem szűkölködik a TinyMCE, ugyanis alap esetben is 79 formázási, szerkesztési funkciót kínál. Ezen felül lehetőségünk van még kiegészítőket is készíteni a szoftverhez, ami ismét a tesreszabhatóságot növeli. Igencsak kényelmes, említésre méltó funkciója a teljes képernyős szerkesztésmód.
Alapvetően az egyik legjobb javascript alapú WYSIWYG szerkesztőnek tartom, személyes kedvencem is, de remélem nem voltam túl elfogult. Összegzésben tőlem egy 10 -es skálán 8.5 pontot kapna a TinyMCE.
A sorozat következő részében az FCKeditort fogom bemutatni. Addigis próbáljátok ki ti is a TinyMCE -t ha még nem tettétek meg eddig, és mondjátok el a véleményeteket hozzászólásoka.
