Tutorial Upload Gambar Di CKEditor Dengan PHP

Jika kamu mengunakan CMS dalam mengedit konten pada website kamu dalam hal ini mengunakan CKedito...
Penulis
Admin
Kategori
Tutorial
Estimasi
3 menit baca
Dilihat
1.7K
Posting
18 Jun 2022
Tutorial Upload Gambar Di CKEditor Dengan PHP Jika kamu mengunakan CMS dalam mengedit konten pada website kamu dalam hal ini mengunakan CKeditor, pasti upload gambar atau image sangatlah penting untuk menambah elemen pada konten itu sendiri, terkadang terdapat permasalahan dimana saat kita akan mengupload gambar, CKEditor tidak secara default bisa mengupload gambar dengan kata lain kita harus menginstall plugin tambahan Tutorial Upload Gambar Di CKEditor Dengan PHP
2022-11-24

Pada kesempatan kali ini, kita akan membahas bagaimana cara mengupload gambar atau image dalam CKEditor tanpa plugin dan cepat. sebelumnya kita sudah membahas bagaimana mengintegrasikan dengan plugin upload gambar bawaan yaitu CKFinder, jika kamu ingin membacanya silahkan kunjungi artikel cara install CKEditor dan mengintegrasikan dengan CKFinder, Jika kamu mengunakan CMS dalam mengedit konten pada website kamu dalam hal ini mengunakan library HTML editor ini, pasti upload gambar atau image sangatlah penting untuk menambah elemen pada konten itu sendiri, terkadang terdapat permasalahan dimana saat kita akan mengupload gambar.

CKEditor tidak secara default bisa mengupload gambar dengan kata lain kita harus menginstall plugin tambahan, untuk mengunggah gambar atau file, ada dua cara untuk mengunggah gambar di CKEditor, pertama kamu harus menggunakan plugin khusus untuk mengaktifkan fungsi mengunggah gambar atau harus membuat script khusus untuk menjalankannya, jangan khawatir disini kita akan rinci menjelaskan agar kamu mudah untuk mengunakannya.

Kita semua tahu CKEditor adalah editor HTML yang banyak digunakan di aplikasi berbasis web apa pun, dan sangat mudah digunakan, dan sangat mudah diintegrasikan ke dalam aplikasi atau website kita.

 

 

Sebelum ketahap installasi, siapkan beberapa element untuk mendukung agar semuanya berjalan lancar, yaitu:

  • Siapkan CKEditor
  • HTML Code untuk integrasi CKEditor
  • Script PHP untuk upload gambar

Dalam contoh kali ini, saya telah membuat beberapa file yang akan digunakan untuk tutorial kali ini, kira-kira seperti ini:

 

Tutorial Cara Upload Gambar Di CKEditor Dengan PHP

 

Dalam struktur ini, terdapat folder upload, index.php dan upload.php, folder upload berguna untuk akan menampung file gambar yang kita upload melalui texteditor, selanjutnya index.php untuk menampilkan CKEditor dan upload.php merupakan custom script php yang berfungsi untuk mengupload gambar tanpa plugin bawaan CKEditor.

 

1. Siapkan CKEditor

Untuk mengintegrasikannya ke web aplikasi kita, ada dua cara yang bisa dilakukan yaitu melalui CDN atau download resmi di websitenya langsung di website CKEditor, jika kamu mengunakan metode download, kamu simpan folder CKEditor dari download bersamaan dengan file index.php, upload.php dan folder upload.

 

2. Kode HTML untuk integrasi CKEditor

Katakan kamu sudah mendownload CKEditor kedalam root project aplikasi web kalian atau CDN yang sudah terpasang dalam tag HTML, jika menggunakan metode download, panggil file-file js seperti ckeditor.js, jquery,js dan bootstrap.js kedalam tag HTML, dalam contoh, kita telah membuatkan index.php, untuk menampilkan library kedalam bidang textarea khusus.

Untuk isi kode dari index.php, bisa kalian copy paste dibawah ini: 

index.php

<!DOCTYPE html>
<html>

<head>
    <title>Bagaimana Cara Upload Image Di CKEditor Tanpa Plugin Mengunakan PHP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <br />
        <h3 align="center">Bagaimana Cara Upload Image Di CKEditor <br>Tanpa Plugin Mengunakan PHP</h3>
        <br />
        <div class="panel panel-default">
            <div class="panel-body">
                <textarea name="content" id="content" class="form-control ckeditor"></textarea>
            </div>
        </div>
    </div>

<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>
<script>
    CKEDITOR.replace('content', {
        height: 300,
    });
</script>
</body>

</html>

 

Dalam kode ini, tag textarea class=ckeditor berfungsi untuk mengintegrasikan CKEditor kedalam bidang textarea. Jika kita ingin mengupload gambar kedalam HTML editor, fitur upload belum bisa digunakan secara default dimana kita harus mengunakan plugin untuk mengaktifkannya.

Tapi disini kita tidak akan menggunakan plugin, namun akan mengunakan script PHP khusus untuk mengaktifkan fungsi upload gambar kedalam server.

 

Tutorial Cara Upload Gambar Di CKEditor Dengan PHP

 

3. Script PHP untuk upload gambar

Setelah kamu berhasil mengintegrasikan CKEditor kedalam textarea, langkah selanjutnya adalah kita membuat script baru yang akan kita beri nama upload.php, untuk mengaktifkan tab upload saat kita akan mengupload gambar, full source codenya seperti ini:

<?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>";
    }
}

?>

Setelah kamu menambahkan file script tersebut kedalam upload.php jangan lupa untuk menambahkan baris baru pada tag script dalam index.php sebagai berikut:

filebrowserUploadUrl: "upload.php"

yang akan menjadi:

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

Untuk mengaktifkan tab upload, Anda dapat melihat pada kode javascript diatas, di mana kami telah menggunakan opsi filebrowserUploadUrl yang akan mengaktifkan tab upload dalam kotak dialog gambar.

Dalam opsi ini kita dapat menentukan nama file script PHP yang telah kita buat tadi yaitu upload.php, script ini digunakan sebagai alat untuk mengupload gambar yang dipilih ke dalam folder dan mengirim permintaan untuk mengupload gambar dan menyimpannya keserver.

Jika kamu ingin menyesuaikan letak folder untuk menyimpan gambar kamu, kamu bisa edit baris dibawah ini, edit pada bagian upload/ menjadi path folder yang kamu inginkan. jika tidak berhasil kamu bisa tambahkan url nama domain diawal, contoh: https://yourwebsite.com/public/upload/

move_uploaded_file($file, 'upload/' . $new_image_name);
$url = 'upload/' . $new_image_name;

Ini merupakan langkah terakhir dimana kamu sekarang bisa upload gambar sesuka hatimu, untuk hasil akhir bisa cek foto dibawah ini:

 

Tutorial Cara Upload Gambar Di CKEditor Dengan PHP

 

Setelah kita memilih gambar dan mengklik send it to the server, maka gambar tersebut sudah berhasil masuk kedalam text editor kita, contoh seperti ini:

 

Tutorial Cara Upload Gambar Di CKEditor Dengan PHP

 

Dan file gambar berhasil tersimpan pada folder upload

 

Tutorial Cara Upload Gambar Di CKEditor Dengan PHP

 

Kesimpulan

Sekian Tutorial kali ini, kita telah berhasil membuat script php tanpa bantuan plugin tambahan dalam texteditor CKEditor dalam aplikasi web kita.

Share