การใช้ CKEditor 5 แบบ CDN รองรับการอัปโหลดไฟล์ อย่างง่าย

uploads/202404/mypic.jpg

uploads/202404/mypic_1.jpg
uploads/202404/mypic_2.jpg
......

uploads/202404/image_1.png
uploads/202404/image_2.png
......

<?php
/** Error reporting ใช้ตอนพัฒนา ปิดเมื่อนำไปใช้งาน */
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
// ฟังก์ชั่นสำหรับตรวจสอบไม่ให้อัพโหลดทับไฟล์เดิม กรณีชื่อไฟล์ซ้ำ
function getUniqueFileName($directory, $filename)
{
	// ถ้ายังไม่มีชื่อไฟล์นี้อยู่ ก็ให้ให้ใช้ชื่อไฟล์เริ่มต้น 
	if (!file_exists($directory . $filename)) {
		return $filename;
	}

	// กรณีมีชื่อไฟล์นี้อยู่แล้ว ตรวจสอบข้อมูลไฟล์
	$extension = pathinfo($filename, PATHINFO_EXTENSION);
	$basename = pathinfo($filename, PATHINFO_FILENAME);

	// สร้างตัวแปรนับจำนวนไฟล์ที่ชื่อซ้ำ เพื่อใช้เป็นตัวเลข ต่อไปในชื่อไฟล์นั้นๆ
	$counter = 1;
	// วนลูปไปจนกว่าจะไม่ซ้ำกับไฟล์ใดๆก่อนหน้า
	while (file_exists($directory . $basename . '_' . $counter . '.' . $extension)) {
		$counter++;
	}

	// ส่งกลับชื่อไฟล์ที่ไม่ซ้ำกลับไปใช้งาน
	return $basename . '_' . $counter . '.' . $extension;
}
// ตรวจสอบว่ามีการเลือกไฟล์เพื่ออัพโหลดหรือไม่ ชื่อ upload จะเป็นชื่อของ ข้อมูลไฟล์ที่ ckeditor สร้างให้
if (isset($_FILES['upload']['name'])) {
	// มีการเลือกไฟล์ และไม่ใช่ค่าว่าง
	if (isset($_FILES['upload']['name']) && $_FILES['upload']['name'] != "" ) {
		$file_name = $_FILES['upload']['name'];  // ชื่อไฟล์
		$file_tmp = $_FILES['upload']['tmp_name']; // ข้อมูลไฟล์
		$file_size = $_FILES['upload']['size']; // ขนาดไฟล์

		// กำหนดตัวแปร กรณ๊เกิดข้อผิดพลาด
		$error_message = '';
		// ตรวจสอบข้อมูลไฟล์ว่าเป็นรูปภาพหรือไม่
		$check = getimagesize($file_tmp);
		if ($check !== false) {
			$uploadOk = 1;
		} else {
			$error_message =  "File is not an image.";
			$uploadOk = 0;
		}

		// กรณีกำหนดขนาดไฟล์ไม่่เกิน 500 Kb หรือ 0.5 MB
		if ($file_size > 500000) {
			$error_message =  "Sorry, your file is too large.";
			$uploadOk = 0;
		}

		// กรณีกำหนดเงื่อนไขว่าต้องเป็นไฟล์นามสกุล ที่กำหนดเท่านั้น
		$allowedFormats = array("jpg", "jpeg", "png", "gif");
		$fileExtension = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
		if (!in_array($fileExtension, $allowedFormats)) {
			$error_message =  "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
			$uploadOk = 0;
		}

		// กรณีไม่ผ่านเงื่อนไขการตรวจสอบไฟล์ก่อนอัปโหลด
		if ($uploadOk == 0) {
			$error_message =  "Sorry, your file was not uploaded.";
			$response = array(
				'uploaded' => false,
				'error' => $error_message
			);
		} else { // กรณีเงื่อนไขผ่าน พร้อมอัปโหลด
			// กำหนดโฟลเดอร์ สำหรับเก็บไฟล์
			$upload_dir = "uploads/";

			// สร้างตัวแปรวันที่สำหรับ ใช้สร้างโฟลเดอร์ย่อย แยกตามเดือนและปี ณ ขณะนั้น
			$currentYear = date("Y");
			$currentMonth = date("m");

			// จัดรูปแบบ ปีเดือน เช่น 202401 เป็นโฟลเดอร์ข้อมูล ปี 2024 เดือน 01 รูปทั้งหมด
			// ที่อัปโหลดช่วงนี้ จะถูกจัดเก็บไว้ในนี้
			$folderName = $currentYear . sprintf("%02d", $currentMonth);

			// ตรวจสอบว่ามีโฟลเดอร์ดังกล่าว อยู่แล้วหรือไม่ ถ้าไม่มีให้ทำการสร้างขึ้นมา
			if (!file_exists($upload_dir . $folderName)) {
				mkdir($upload_dir . $folderName, 0777, true);
				$upload_dir = $upload_dir . $folderName . "/";
			} else {
				$upload_dir = $upload_dir . $folderName . "/";
			}

			// นำชื่อไฟล์ไปตรวจสอบ ว่ามีชื่อไฟล์นี้อยู่แล้วหรือไม่ ถ้ามีซ้า ก็จะทำการเพิ่มตัวเลขต่อท้ายเข้าไป
			$file_name = getUniqueFileName($upload_dir, $file_name);

			// ทำการย้ายข้อมูลไฟล์ที่อัปโหลดไปไว้ในโฟลเดอร์ และ ชื่อไฟล์ที่กำหนด
			if (move_uploaded_file($file_tmp, $upload_dir . $file_name)) {
				// ส่งกลับข้อมูลที่อยู่หรือ url ของไฟล์รูปภาพที่อัปโหลด พร้อมสถานะการอัปโหลดที่สำเร็จ
				$file_url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $upload_dir . $file_name;
				$response = array(
					'uploaded' => true,
					'url' => $file_url
				);
			} else {
				// เกิดข้อผิดพลาดไม่สามารถย้ายข้อมูลไฟล์ หรืออัปโหลดไฟล์ได้ เช่น ถูกปิด permission
				$response = array(
					'uploaded' => false,
					'error' => 'Failed to move uploaded file.'
				);
			}
		}
	} else {
		// ไม่มีการเลือกไปล์เพื่อผัปโหลด
		$response = array(
			'uploaded' => false,
			'error' => 'No file uploaded.'
		);
	}
	// คืนค่าข้อมูลเป็น json เพื่อไปให้ ckeditor จัดการ
	header('Content-Type: application/json');
	echo json_encode($response);
	exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CKEditor Image Upload Example</title>
	<script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/classic/ckeditor.js"></script>
	<style type="text/css">
		/* กำหนดความสูงง่ายๆ ผ่าน css */	
		.ck-editor__editable {
			min-height: 250px;
		}
	</style>
</head>

<body>
	<h2>Upload Image</h2>
	<form action="temp_upload.php" method="post" enctype="multipart/form-data">
		<input type="file" name="image" accept="image/*" required>
		<button type="submit" name="submit">Upload</button>
	</form>

	<h1>CKEditor Image Upload Example</h1>
	<textarea name="message" id="editor"></textarea>

	<script>
		ClassicEditor
			.create(document.querySelector('#editor'), {
				ckfinder: {
					uploadUrl: '/ckeditor_upload.php' // กำหนด path ส่วนของไฟล์อัปโหลด
				}
			})
			.catch(error => {
				console.error(error);
			});
	</script>
</body>
</html>