ketika kita membuat suatu input berita misalnya, memerlukan tampilan sebagai berikut :
untuk membuat tampilan seperti gambar di atas, kita memerlukan fasilitas ckeditor yang dapat diunduh dari lamannya. setelah melakukan pengunduhan, silahkan siapkan script html di bawah ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Input Berita</title>
</head>
<body>
<table align=”center” bgcolor=”#CCCCCC”>
<form method=”post” action=”isiberita.php” enctype=”multipart/form-data”>
<tr><th colspan=”4″ bgcolor=”#999999″><font color=”#FFFFFF”>INPUT BERITA</font></th></tr>
<tr>
<td>Judul Berita</td>
<td>:</td>
<td><input type=”text” name=”judul” maxlength=”30″ size=”30″/></td>
</tr>
<tr>
<td>Penulis</td>
<td>:</td>
<td><input type=”text” name=”penulis” maxlength=”30″ size=”30″/></td>
</tr>
<tr>
<td>Gambar</td>
<td>:</td>
<td><input type=”file” name=”picture” id=”picture” /></td>
</tr>
<tr>
<td>Tanggal</td>
<td>:</td>
<td>Tanggal <?php echo “<select name=’tanggal’>”;
for($a=1;$a<=31;$a++)//menuliskan tanggal secara otomatis dengan perulangan / looping
{
echo “<option value='”.$a.”‘>”.$a.”</option>”;
}
echo “</select>”;
?>
Bulan <?php echo “<select name=’bulan’>”;
for($b=1;$b<=12;$b++)//menuliskan bulan secara otomatis dengan perulangan / looping
{
echo “<option value='”.$b.”‘>”.$b.”</option>”;
}
echo “</select>”;
?>
Tahun <?php echo “<select name=’tahun’>”;
$thn=date(‘Y’);
for($c=2001;$c<=$thn;$c++)//menuliskan tahun secara otomatis dengan perulangan / looping
{
echo “<option value='”.$c.”‘>”.$c.”</option>”;
}
echo “</select>”;
?>
</td>
</tr>
<tr>
<td>Isi Berita</td>
<td>:</td>
<td><textarea cols=”80″ name=”news” id=”news”></textarea>
</td>
</tr>
<tr><td><input type=”submit” name=”submit” value=”Kirim Pengumuman”/></td></tr>
</form>
</table>
</body>
</html>
simpan didalam folder editor , setelah itu silahkan mengekstrak ckeditor ke dalam folder tadi, selanjutnya letakkan code berikut ini di <head>:
<script type=”text/javascript” src=”ckeditor/ckeditor.js”></script>
<link href=”ckeditor/content.css” rel=”stylesheet” type=”text/css”/>
setelah itu letakkan code berikut dibawah textarea:
<textarea cols=”80″ name=”news” id=”news”></textarea>
<script type=”text/javascript”>
var editor = CKEDITOR.replace(‘news’);
</script>
silahkan dicoba dijalankan dengan mengetikkan text, gunakan fasilitas bold, italic dll.