Senin, 14 Maret 2016

Membuat Form Menggunakan CKEDITOR.

CKEditor adalah editor konten WYSIWYG berbasis browser. Ini berarti konten yang sedang diedit di dalamnya terlihat semirip mungkin dengan pengguna hasil akhir akan melihat setelah telah diterbitkan. Ini membawa ke web kata umum fitur prosesor ditemukan dalam aplikasi editing desktop seperti Microsoft Word dan OpenOffice.
Ckeditor biasa digunakan di dalam form seperti edit,komentar dll. 
Langkah-langkah membuatb form menggunakan ckeditor.
  1. Download ckeditor di ckeditor.com
  2. Copy file ckeditor ke folder script form.
  3. Ekstrak file ckeditor.
  4. Masukan Script seperti dibawah ini.
<?php
include 'koneksi.php';

// ambil artikel yang mau di edit
$id_cerita = $_GET['id_cerita'];
$query     = ("select * from cerita where id_cerita = '$id_cerita'");
$hasil = mysqli_query($db, $query);
$cerita = mysqli_fetch_array($hasil);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit Cerita</title>
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <h2 align="center">FORM EDIT CERITA</h2>
    <form action="proses-edit-cerita.php"mencobaform_edit_cerita" id="form_edit_cerita" method="post">
        <input value="<?php echo $id_cerita; ?>" type="hidden" name="id_cerita" id="id_cerita">
        <table align="center">
            <tr>
                <td><b><center>JUDUL</center></b><br>
               
                     <textarea name="judul" id="judul" cols="100" rows="2"><?php echo $cerita['judul']; ?></textarea>
                </td>
            </tr>
            <tr>
                <td><b><center>ISI</center></b><br>
               
                    <textarea name="isi" id="isi" cols="100" rows="10"><?php echo $cerita['isi']; ?></textarea>
                    <script> CKEDITOR.replace('isi');</script>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" name="update" id="update" value="Simpan">
                    <input type="reset" name="batal" id="batal" value="Batal" onclick="self.history.back();">
                </td>
            </tr>
        </table>   
    </form>
</body>
</html>


script ini berfungsi untuk memanggil script ckeditor.js  yang terletak di folder ckeditor
  <script src="ckeditor/ckeditor.js"></script>
 Script yang ini untuk menempatkan ckeditor kedalam form. di atas form yang menggunakan ckeditor adalah form isi cerita maka saya kasih yang ckeditor.replace('isi').
  <script> CKEDITOR.replace('isi');</script>
Maka akan tampil seperti gambar di bawah ini
.......selesai......

Semoga postingan saya ini bermanfaat dan selamat mencoba.

Tidak ada komentar:

Posting Komentar

Berikan Komentar, yang baik akan di balas dengan baik Pula.
Komentarmu Cerminan Hidupmu.