Belajar JQuery: Membuat Rich Text Editor sederhana dengan LwRTE

Apa itu Rich Text Editor

Rich Text Editor adalah editor teks yang diperkaya dengan kemampuan penebalan kata, pencetakan miring, pemasukan URL, gambar dan lain-lain. Ada beberapa macam Rich Text Editor, dari mulai yang desktop-base seperti Notepad,Notepad++ sampai ke web-based TinyMCE,fck-editor dll.

Lightweight RTE

Lightweight RTE adalah plugin JQuery untuk membuat rich text editor berbasis JQuery yang sederhana namun kaya fitur. Solusi lain selain Lightweight RTE antara lain: MarkitUp (http://markitup.jaysalvat.com/home/), jWYSIWYG (http://code.google.com/p/jwysiwyg/), HTMLBox (http://remiya.com/cms/projects/jquery-plugins/htmlbox/) dan lain-lain.

Menggunakan Lightweight RTE

Untuk dapat menggunakan Lightweight RTE, unduh dulu dari: http://rte-light.googlecode.com/svn/trunk/jquery.rte.js (klik kanan save-as).

Kemudian pasang javascript pada skrip html, seperti dicontohkan berikut:
[sourcecode language=”php”]
<form>
<p>
<textarea name="description" id="id_description"
class="rte-zone">jQuery RTE</textarea>
</p>
<p>
<textarea name="description2" id="id_description2"
class="rte-zone">jQuery RTE 2</textarea>
</p>
<input type="submit" />
</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.rte.js"></script>
<script type="text/javascript">
$(‘.rte-zone’).rte("css url", "toolbox images url");
</script>
</form>
[/sourcecode]

Screenshoot:

Silakan lihat demo-nya disini: http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html