Cara Upload Gambar Menggunakan ckeditor di PHP

Cara Upload Gambar Menggunakan ckeditor di PHP

CKEditor adalah suatu plugin text editor yang biasa digunakan agar dapat membantu user dalam membuat artikel untuk halaman website. Hal ini dikarenakan CKEditor memiliki beberapa toolbar atau menu seperti word yang dapat mengatur format penulisan, penomoran, menyisipkan gambar dan lain-lain. Pada kesempatan kali ini CKEditor akan saya bahas pada article tentang Cara Upload Gambar Menggunakan ckeditor di PHP.

Sebelum memulai teman-teman silahkan gunakan link CKEditor di bawah ini untuk membuat Text Editor untuk halamn website.

<script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>

Langkah pertama Cara Upload Gambar Menggunakan ckeditor di PHP yaitu membuat struktur html seperti berikut ini.

 

<!DOCTYPE html>

<html>

 <head>

  <title>Cara Upload Gambar Menggunakan ckeditor di 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 Gambar Menggunakan ckeditor di PHP</h3>

   <br />

   <div class="panel panel-default">

    <div class="panel-heading">

     <h3 class="panel-title">Cara Upload Gambar Menggunakan ckeditor di 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>

Jika sudah maka teman-teman buat file baru dengan nama upload.php untuk melakukan proses upload gambar. Jangan lupa juga siapkan folder kosong dengan nama upload untuk menyimpan gambar yang akan di 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>";

 }

}

?>

Jika sudah maka ketika ditampilkan di halaman browser akan seperti pada gambar di bawah ini.

Demikian artikel tentang Cara Upload Gambar Menggunakan ckeditor di PHP. Semoga dapat bermanfaat dan selamat mencoba.