Upload Gambar di CKEditor Dengan PHP


Pada antarmuka text editor ckeditor terdapat sebuah icon yang berfungsi untuk memasukan gambar kedalam text yang kita buat. Secara default ckeditor hanya menyediakan antarmuka untuk memasukan gambar dengan memanfaatkan fungsi img src, jadi disana tidak ada fitur secara langsung yang bisa digunakan untuk melakukan upload gambar, oleh karena itu kita bisa membuat sebuah antar muka sendiri untuk menambahkan fungsi upload gambar.

cara uplod gambar dengan php




#1 Javascript


Buat sebuah costum javascript sesuai dengan nama id atau name dari textarea ckeditor masing - masing. Kemudian direktori kerja buat sebuah folder misal dengan nama upload

Contoh :


<script>
 CKEDITOR.replace( 'content', {
  height: 300,
  filebrowserUploadUrl: "upload.php"
 });
</script>

#2 Upload


Terkahir buat sebuah halaman dengan nama upload.php untuk memenuhi request upload yang dikirim dari ckeditor. Berikut ini adalah contohnya :


<?php

//upload.php

if(isset($_FILES['upload']['name']))
{
 $file = $_FILES['upload']['tmp_name'];
 $file_name = $_FILES['upload']['name'];
 $file_name_array = explode(".", $file_name);
 $extension = end($file_name_array);
 $new_image_name = rand() . '.' . $extension;
 chmod('upload', 0777);
 $allowed_extension = array("jpg", "gif", "png");
 if(in_array($extension, $allowed_extension))
 {
  move_uploaded_file($file, 'upload/' . $new_image_name);
  $function_number = $_GET['CKEditorFuncNum'];
  $url = 'upload/' . $new_image_name;
  $message = '';
  echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($function_number, '$url', '$message');</script>";
 }
}

?>


Secara keseluruhan, nanti pada halaman yang menampilkan ckeditor bisa Anda set seperti berikut ini :


<!DOCTYPE html>
<html>
 <head>
  <title>Upload Gambar CKEDITOR Menggunakan PHP</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">Cara Upload ke CKEditor Menggunakan PHP</h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Cara Upload ke CKEditor Menggunakan PHP</h3>
    </div>
    <div class="panel-body">
     <textarea name="content" id="content" class="form-control ckeditor"></textarea>
    </div>
   </div>
  </div>
 </body>
</html>

<script>
 CKEDITOR.replace( 'content', {
  height: 300,
  filebrowserUploadUrl: "upload.php"
 });
</script>


Selain mengunakan cara manual seperti diatas, Anda bisa menggunakan plugins yang memang mendukung untuk dipasang pada ckeditor


Related Posts :

0 Response to "Upload Gambar di CKEditor Dengan PHP"

Post a Comment

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...