Membuat teks editor dengan ckeditor

ketika kita membuat suatu input berita misalnya, memerlukan tampilan sebagai berikut :

editoruntuk 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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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.

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s