Menampilkan text editor javascript tinymce pada textarea


Penulisan pada editor

Alur Program :

  1. User input artikel pada text editor
  2. User  menyimpan data artikel tersebut ke database MySQL
  3. Data disimpan di database
  4. User menampilkan data yang tersimpan di database ke halaman view artikel
  5. Selesai

Untuk penjelasan syntaxnya silahkan buka file index.php

Coding untuk memanggil library editor

<script type=”text/javascript” src=”./jscripts/tiny_mce/tiny_mce.js“></script>
<script type=”text/javascript”>
tinyMCE.init({
mode : “exact”,
elements : “elm2“,
theme : “advanced”,
skin : “o2k7”,
skin_variant : “silver”,
plugins :

template_external_list_url : “lists/template_list.js”,
external_link_list_url : “lists/link_list.js”,
external_image_list_url : “lists/image_list.js”,
media_external_list_url : “lists/media_list.js”,

template_replace_values : {
username : “Some User”,
staffid : “991234”
}
});
</script>

Coding untuk Form editor

<title>Form Editor Ri32</title>
<body onLoad=”document.login.userid.focus();”>
<form action=”simpan.php” method=”post”>

<table width=”637″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”30″><strong>Judul Artikel</strong></td>
</tr>
<tr>
<td width=”67%” height=”30″><font face=”Times New Roman” size=”2″>
<input type=”text” name=”judul”/ size=”40″></font></td>
</tr>

<tr>
<td width=”67%” height=”30″><font face=”Verdana, Arial, Helvetica, sans-serif” size=”1″><em>(Gunakan editor untuk mengedit tulisan)</em></font></td>
</tr>

<tr>
<td width=”67%” height=”182″><font face=”Times New Roman” size=”2″>
<textarea name=”isi” cols=”30″ rows=”10″ id=’elm2′></textarea></font></td>
</tr>

<tr>
<td>&nbsp;</td>
</tr>

<tr>
<td width=”67%”><input type=”submit” value=”Simpan”>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

Catatan :

perhatikan syntax id=elm2 pada tag <textarea name=”isi” cols=”30″ rows=”10″ id=’elm2‘></textarea>

Tampilan Hasil Editor

Download Tinymce

http://www.4shared.com/file/OHLhCcFF/text_editor.html

Download nicEdit

http://www.4shared.com/file/SUhOsg3C/nicEdit-ri32.html

Sekian artikel dari saya semoga dapat bermanfaat untuk teman-teman dan anda semua…aamin

Depok, 26-02-2011

 

noname

Advertisements

12 Responses

  1. mw nanya ni mas…saya kan ad donLot ujian onLen yg dari blog ini jga..
    jadi text edotir ini saya masukkan di script ujian onlen….
    tpi pada saat view soalnya….kan saya tes tulisan bold…
    tpi outputnya gag mw muncuL tulisan boldnya cma bold….
    tulisanya bisa…gag tebal….
    dmna ya kira2 yg saLah…?????

    Like

  2. sepertinya di script untuk menampilkn data dari databasenya di filter agar tag html tidak ditampilkan.

    untuk kasus seperti ini mau tidak mau filter tadi di hilangkan dahulu. agar efek bold pada tulisan bisa di tampilkan sebagai tah html

    script filter nya sendiri biasanya saya menggunakan fungsi

    htmlentities()
    atau scripttags()

    silahkan dicari, kalo ada di hilangkan dahulu.

    sekian semoga paham : )

    Like

  3. Mas, mau tanya, pada saat artikel di submit , artkel yang telah di buat mempnyai link. semisal kta imput nah keluarnya artikel itu nama pada url , nama jdul artikel yang telah di buat. mohon penyerahannya. termiakasih.

    Like

  4. iya mas udah mau , tapi gag pengaruh apa2 ya saya hapus fungsi htmlentities() ???
    sebenernya itu fungsinya untuk ap ya mas???

    Like

  5. terima kasih mas sangat bermanfaat

    Like

  6. gan klo php gmana yach??

    Like

  7. Saya menggabungkan tinymce dengan codeigniter, sukses sampai pada proses insert ke database mysql, tapi saat menampilkan hasil data. tag htmlnya tidak dibaca.. apa yang salah kira2?

    Like

  8. Makasi gan infonya ini sangat-sangat membantu saya thanks sekali lagi gan

    Like

  9. Apabila di dalam inputan tiny mice itu ada gambarnya
    cara menampilkannya bgaimana yach kok kosong

    Like

  10. supya bisa browse image didalam na gimana gann ?? gak pake link pake file image ??

    Like

  11. matur suwun gan, tapi aku masukin di web ku utk seluruh library nya. saat aku kasih motion kog gak keluar motion nya ya di view ku 😦

    Like

  12. Mas, kalo nambah vitur edit artikel gimana?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: