Ngoprek TinyMCE 1 - Melengkapi Vitur Textarea dengan TinyMCE

Bagi para web developer atau sejenisnya, tentu kenal dengan fasilitas form yang bernama textarea.Textarea ini adalah sebuah elemen web yang bekerja dalam elemen form. Textarea ini berfungsi untuk menerima masukan data dari user seperti yang biasa kita lakukan di blog-blog dan juga dalam Multiply ini. Textarea secara dasar tidak memiliki fasilitas pengaturan font, gambar dan lain sebagainya. Sehingga seharusnya kita menggunakan textarea basic, adalah dengan cara memasukkan kode html.

Contoh text area:

<form action="#" method="post" name="mbuh">
<textarea name="isi_berita"></textarea>
<br />
<input type="submit" value="CROT">
</form>

Hasilnya menjadi seperti berikut ini:

What You See Is What You Get

Untuk menunjang kebutuhan pengaturan font dan lain sebagainya, dapat digunakan beberapa tools yang memiliki fitur-fitur yang dibutuhkan tersebut. Dalam dunia IT dikenal dengan istilah What You See Is What You Get. Jika ditulis dengan cetak tebal, ya akan muncul hurup cetak tebal, tidak lagi dengan kode. Fitur pelengkap Textarea ini banyak macamnya.. FCKEditor, RTE adalah dua diantara module itu.. Namun ternyata yang paling banyak digunakan programmer PHP adalah TinyMCE. Selain Free, TinyMCE tidak terlalu memakan banyak tempat. Untuk contohnya saya tetap menggunakan image, karena memang di MP tidak menerima kode javascript. Sementara tinyMCE menggunakan Javascript.

Gambar 1 Tampilan TinyMCE

Bagaimana cara membuatnya? Caranya adalah hanya dengan menambahkan id pada textarea dengan yang telah ditentukan pada tinyMCE. Yaitu id elm1, elm2 dan seterusnya. Contoh:

<form action="#" method="post" name="mbuh">
<textarea name="isi_berita" id="elm1"></textarea>
<br />
<input type="submit" value="POST">
</form>

Apakah hanya seperti itu? Tentu tidak!. Sebelum Form pemuat textarea "ID elm" tersebut harus lebih dulu CORE tinyMCE diload. Dengan apa? Biasanya dengan cara melakukan pemanggilan TinyMCE_init.


Sub Aplikasi yang dibutuhkan.

Aplikasi pembentuk tampilan textarea dengan nama tinyMCE ini dapat didownload di situsnya http://tinymce.moxiecode.com/download/download.php. Pilih saja yang paling baru. Ekstraklah pada tempat yang diinginkan...

Sebagai contoh saya meletakkan pada direktori DocumentRoot komputer saya. Perhatikan pada gambar berikut:

Gambar 1. Meletakkan tinyMCE versi terbaru pada DocumentRoot

Gambar 2. Extract Tiny MCE



Gambar 3 . Struktur Direktori di dalam TinyMCE

TinyMCE secara umum terbagi dua direktori besar, yaitu jscripts dan example..

Gambar 4 . Sorot contoh SIMPLE



Gambar 5 . Isi dari contoh Simple.html






Gambar 6. Hasil TinyMCE SIMPLE




Gambar 7 . Memilih FULL.HTML

Gambar 8. Membuka isi dari Full.HTML

Secara umum, Tiny MCE dipasang dengan cara:

1. Mengektraksi pada direktori tertentu... Ditempat saya, saya letakan di libs
2. Mencari file dalam aplikasi kita yang mungkin membutuhkan tampilan WYSWYG
3. Meletakkan TinyMCEinit script diatas form yang kita perlukan
4. Menambahkan ID "elm" pada textarea yang kita butuhkan
5. Melihat pada tampilan

OUTPUT.

Keluaran yang diinginkan dari TinyMCE ini adalah:

1. Mempermudah proses editing dalam textarea
2. Mendapatkan hasil pada input database yang langsung dalam bentuk format Markup Language.

Catatan.

1. TinyMCE dalam versi yang gratis sekarang belum support dengan upload picture. Ada dalam bentuk berbayar.. Untuk oprekannya, tunggu posting setelah ini :D
   
2. TinyMCE yang sudah ada dalam versi yang berjalan sekarang, belum sepenuhnya mendukung proses Copy dan Paste dari MS Word 2007. Hendaknya menggunakan MSWord 2003 atau sebelumnya. Karena bentuk MS Word 2007 (DocX) adalah versi yang didukung sistem dotnet, dengan bentuk XHTML atau XML (CMIIW)

Untuk kemudahan rekan-rekan, saya menyediakan struktur TinyMCE yang telah saya edit dengan struktur seperti berikut

struktur awal:

tinymce/
            /jscripts
            /example

dengan catatan para developer harus selalu memasukkan urutan ini:

<!-- TinyMCE -->
    <script type="text/javascript" src="libs/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({
})



sebelum pada form dimulai.. terserah bahwa anda akan menggunakan jenis tinyMCE simple atau full atau custom. Untuk kondisi Custom akan saya posting tersendiri, atau....

Download di sini:,

dan tiap akan memulai form, tinggal memanggil:

<?php
include_once $dir . '/function_tiny.php';
tinyeditor();
?>

dengan $dir adalah direktori letak file function yang dapat anda letakkan dimanapun...



Maka telah tercapai segala FULL Tiny anda... Selamat mencoba, silakan bertanya, yang OOT juga ndak apapapapapapapapa... Iklan mbayar!

Monggo sederek sederek jika akan dicoba ada di

http://bimosaurus.com/form/