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.

Berikut ini adalah Cara Upload Gambar di CKEditor 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

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Upload Gambar di CKEditor Dengan PHP

#1 Javascript

#2 Upload

0 Response to "Upload Gambar di CKEditor Dengan PHP"

Post a Comment