Beranda / Pemrograman / Tutorial

Cara Upload Gambar di CKEditor 4 Menggunakan PHP Tanpa Plugin Berbayar

Posting Komentar

Cara Upload Gambar di CKEditor 4 dengan PHP (Tanpa Plugin Berbayar!)

CKEditor 4 adalah salah satu rich text editor terbaik dan paling populer di web—mirip Microsoft Word versi online. Fiturnya lengkap: bold, heading, link, bahkan upload gambar. Tapi, sayangnya untuk upload gambar secara langsung, CKEditor biasanya butuh plugin premium seperti CKFinder. Tenang, di artikel ini kamu akan belajar bagaimana caranya mengaktifkan fitur upload gambar langsung ke server menggunakan PHP murni, tanpa perlu plugin berbayar. Siap? Kita mulai!

---

1. Download CKEditor 4 dengan Plugin Upload Gambar

  1. Kunjungi: CKEditor 4 Online Builder.
  2. Pilih preset “Full” dan tambahkan plugin tambahan imageupload.
  3. Centang "I agree" dan klik download untuk mendapatkan file ZIP CKEditor.
CKEditor Builder Plugin
---

2. Buat Database dan Tabel Penyimpanan

Buat database baru bernama paket dan gunakan SQL berikut untuk membuat tabel:

CREATE TABLE paket (
  id INT AUTO_INCREMENT PRIMARY KEY,
  judul VARCHAR(255) NOT NULL,
  deskripsi TEXT NOT NULL
);
---

3. Buat File index.php + Integrasi CKEditor

Ekstrak CKEditor ke folder ckeditor/, lalu buat file index.php seperti ini:

<?php
$koneksi = new mysqli("localhost", "root", "", "paket");
?>
<!doctype html>
<html>
<head>
  <title>Upload Gambar CKEditor dengan PHP</title>
  <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
  <div style="width:800px;margin:auto;padding:20px;">
    <h2>Form Upload</h2>
    <form method="post">
      <input type="text" name="judul" placeholder="Judul" required><br><br>
      <textarea id="deskripsi" name="deskripsi" rows="8" cols="80"></textarea><br><br>
      <button name="simpan">Simpan</button>
    </form>
  </div>

  <script>
    CKEDITOR.replace('deskripsi', {
      filebrowserUploadUrl: 'unggahgambar.php',
      filebrowserUploadMethod: 'form'
    });
  </script>

  <?php
  if (isset($_POST['simpan'])) {
    $j = $koneksi->real_escape_string($_POST['judul']);
    $d = $koneksi->real_escape_string($_POST['deskripsi']);
    $koneksi->query("INSERT INTO paket(judul, deskripsi) VALUES('$j','$d')");
    echo "<script>alert('Berhasil disimpan!');</script>";
  }
  ?>
</body>
</html>
---

4. Buat Folder Upload

Di root proyek, buat folder uploadimage/. Pastikan permission folder ini mengizinkan upload file.

---

5. Buat File unggahgambar.php

File ini memproses gambar dari CKEditor dan mengembalikan URL-nya:

<?php
$upload_dir = 'uploadimage/';
$allowed = ['jpg','jpeg','png','gif'];

if (isset($_FILES['upload'])) {
  $ext = strtolower(pathinfo($_FILES['upload']['name'], PATHINFO_EXTENSION));

  if (in_array($ext, $allowed)) {
    $filename = time().'-'.preg_replace("/[^a-zA-Z0-9]/", "_", basename($_FILES['upload']['name']));
    move_uploaded_file($_FILES['upload']['tmp_name'], $upload_dir.$filename);

    $funcNum = $_GET['CKEditorFuncNum'];
    $url = $upload_dir.$filename;
    echo "<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', 'Upload berhasil!');</script>";
  } else {
    echo "<script>alert('Format gambar tidak diizinkan.');</script>";
  }
}
?>
---

6. Uji Upload Gambar

  • Jalankan: http://localhost/ckeditor/index.php
  • Isi form dan klik ikon gambar di toolbar → tab Upload → pilih gambar dan kirim.
  • Gambar akan disisipkan otomatis ke editor dan juga tersimpan di folder uploadimage/.
Demo Upload CKEditor
---

Penjelasan Teknis

  • CKEditor Plugin: Menyediakan form upload di antarmuka editor.
  • unggahgambar.php: Menyimpan gambar ke folder dan memberi respons ke CKEditor.
  • index.php: Form HTML dengan CKEditor, menyimpan ke MySQL.
---

Download Source Lengkap

Unduh source lengkap termasuk CKEditor, SQL, dan file PHP di sini:

---

Video Tutorial (Demo)

---

Kesimpulan

Dengan sedikit pengaturan dan pemahaman dasar PHP, kamu bisa mengaktifkan fitur upload gambar langsung ke server lewat CKEditor 4 tanpa plugin premium. Cocok banget buat blog pribadi, CMS sederhana, sistem berita, atau form admin. Jangan lupa beri izin folder upload dan uji di server lokal seperti XAMPP. Kalau artikel ini bermanfaat, share ke teman kamu yang lagi belajar PHP ya!

--- Kalau kamu ingin versi untuk AMP atau JSON-LD Schema buat SEO maksimal, tinggal bilang aja. Mau dijadikan template Blogger juga bisa. ✅

Posting Komentar untuk "Cara Upload Gambar di CKEditor 4 Menggunakan PHP Tanpa Plugin Berbayar"

Posting Komentar