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.

Cara Upload Gambar Menggunakan ckeditor di PHP

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

6 Mei 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat