Mafia II

Webový WYSIWYG editor zdarma

Červenec 21st, 2006

Pokud programujete webové aplikace, určitě jste se nejednou setkali s problémem jak umožnit obyčejnému uživateli vložit do stránky (či mailu) formátovaný text. Můžeme sice využít spousty alternativních tagů (phpBB, Texy!, …) ale většina obyčejných uživatelů s nimi bude mít velké problémy (vysvětlete někomu kdo má problém s wordem že tučné písmo udělá tak, že vloží na začátek [b] a konec [/b] nebo – nepochopí, nezapamatuje si). I já jsem dostal za úkol napsat aplikaci, kde si každý bude moci napsat formátovaný text a ten odeslat a protože jsem člověk pohodlný, hledal jsem hotové, co nejsnáze aplikovatelné řešení a nalezl jsem naprostý klenot – jmenuje se TinyMCE.

Implementace

Základní element pro vkládání textu je TEXTAREA, nic složitého – takový hodně osekaný poznámkový blok. Ale co kdyby jste mohli prohlížeč říct – nechci NOTEPAD ale WORD – a on za vás udělal zbytek. A na tomto principu funguje i implementace TinyMCE. Jediné co musíte udělat pro nejzákladnější HTML editaci je stáhnout si balíček skriptů a grafiky, vložit do přímo dostupného adresáře na serveru (nebo na disku – funguje i offline!) a vložit do hlavičky následující kód (samozřejmě se změněnou cestou):

<script language="javascript" type="text/javascript"
        src="cesta/k/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
        tinyMCE.init({
                mode : "textareas",
                theme : "simple"
        });
</script>

tento miniaturní zásah způsobí, že veškerá textová pole (TEXTAREA) budou přetvořena na WYSIWYG editory, které budou vypadat nějak takto:

Simple Theme

použít můžete i „advanced theme“, kreté do vašich stránek vloží opravdu nadupaný editor:

Advanced Theme

Závěr

TinyMCE je opravdu třešnička na OpenSource dortu, je rychlý, kvalitní, bez zbytečných chyb a funguje ve většině prohlížečů (MSIE, Firefox, Mozilla, Netscape, Safari, Opera). Díky naprosto jednoduché implementaci zvládne jeho začlenění do stránek i naprostý začátečník, přitom se jedná o nástroj tkerý bych se nebál použít ani ve velkém projektu jako je CMS, WebMail nebo podobně.

Petr

TinyMCE – http://tinymce.moxiecode.com/

Posted in Programování | del.icio.us | Top Of Page |

2 Responses to “Webový WYSIWYG editor zdarma”

  1. Tomas Says:
    Říjen 20th, 2006 at 17.40

    Jen nevím, jak to je s kvalitou výsledného kódu. Jestli třeba jde nastavit XHTML ukončování be-erka

  2. Tomas Says:
    Říjen 20th, 2006 at 17.41

    Aha tak ono to jde nastavit :)
    http://tinymce.moxiecode.com/…lements.html

Vložty komentář