Untuk membuat aplikasi text editor jQuery, hal yang pertama kita harus lakukan adalah mendownload modul jQuery yang kita butuhkan yaitu jQuery RTE-Editor anda dapat mendownloadnya disini
setelah kita selesai mendownloadnya, ekstrak file tersebut pada folder www (localhost), lalu ketikkan kode html di bawah ini :
<html>
<head>
<title>Post Artikel</title>
<link rel="stylesheet" type="text/css" href="jquery.rte.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.rte.js"></script>
<script type="text/javascript" src="jquery.rte.tb.js"></script>
<script type="text/javascript" src="jquery.ocupload-1.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.rte1').rte({ //deklarasi class="rte1"
css: ['default.css'],
base_url: 'editor',
frame_class: 'frameBody',
width: 600,
height: 200,
controls_rte: rte_toolbar,
controls_html: html_toolbar
});
});
</script>
</head>
<body>
<div id="main"> <h2> Form Artikel </h2>
<form method="post" action="#">
<table>
<tr>
<td>Judul </td> <td>:</td> <td><input type="text" name="judul" size="62"> </td>
</tr>
<tr>
<td valign="top">Isi </td> <td valign="top">:</td> <td><textarea name="isi" cols="50" rows="21" class="rte1"></textarea></td>
</tr>
<tr>
<td colspan="3" align="right"> <input type="submit" value="tambah!"> <input type="reset" value="hapus .."> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
selanjutnya, simpan kode html di atas pada folder yang sama tempat anda mengekstrak modul jQuery tersebut dengan nama editor.html lalu buka browser anda dan ketikkan alamat http://localhost/editor.html
inilah hasilnya :
Sekian tutorial kali ini, jika anda kebingungan dalam mengaplikasikan modul jQuery ini jangan ragu untuk bertanya dengan saya atau silahkan lihat dokumentasi yang disertakan pada modul jQuery tersebut. :)
Sampai jumpa pada tutorial selanjutnya!
Tidak ada komentar:
Posting Komentar
Please leave your comment, don't just read. ok?! :)