เนื้อหานี้เป็นแนวทางการประยุกต์ใช้งาน CKEditor แบบอย่างง่าย
ให้เราสามารถสร้างส่วนของ ฟอร์มสำหรับบันทึกข้อมูลลงฐานข้อมูล
ซึ่งปกติ สมมติเราต้องการบันทึกรายละเอียดข้อมูล ถ้าใช้แค่ textarea
ก็จะสามารถบันทึกได้เฉพาะ เนื้อหาที่เป็นข้อความ แต่ถ้านำ CKEditor
มาใช้ ก็จะสะดวก และเพิ่มความสามารถมากยิ่งขึ้น และยิ่งเราใช้รูปแบบ
แบบ CDN ก็ทำให้ง่ายไปอีก โดยไม่ต้องดาวน์โหลดหรือติดตั้งไฟล์ใดๆ เพิ่ม
เติม ก็สามารถใช้งานได้ทันที
นอกจากนี้ เรายังประยุกต์ให้สามารถทำการอัปโหลดรูปภาพ เพื่อแสดงใน
ฟอร์มข้อมูลได้อีกด้วย การอัปโหลด สามารถทำได้ทั้งการเลือกไฟล์รุปที่ต้องการ
หรือจะใช้วิธีการ จับภาพหน้าจอ ในส่วนที่ต้องการ หรือจะคัดลอกรูปภาพจาก
แหล่งข้อมูลอื่น แล้วมาวางใน ckeditor ตัวโปรแกรม ก็จะทำการอัปโหลดให้
และแสดงผลลัพธ์ให้โดยอัตโนมัติ รองรับการอัปโหลดพร้อมกันหลายไฟล์
หรือจากลากไฟล์มาวางพร้อมกันหลายๆ ไฟล์ก็ได้
หรือจากลากไฟล์มาวางพร้อมกันหลายๆ ไฟล์ก็ได้
ในตัวอย่างจะใช้แค่ไฟล์เดียว สามารถนำไปปรับประยุกต์ตามต้องการได้ โดยหลัก
การอัปโหลดไฟล์ กรณี เราเลือกอัปโหลดไฟล์เอง สมมติ อัปโหลดไฟล์ชื่อ mypic.jpg
ในเดือน 4 ปี 2024 เมื่อทำการอัปโหลด ไฟล์ก็จะถูกอัปโหลดไปยังโฟลเดอร์
uploads/202404/mypic.jpg
โฟลเดอร์ uploads สามารถเปลี่ยนไปยัง path ที่ต้องการได้
กรณีเราอัปโหลดรูปซ้ำชื่อเดิม ในเดือนเดิม ซึ่งชื่อจะซ้ำกัน ก็จะถูกเปลี่ยนเป็นชื่อใหม่
ในรูปแบบ
uploads/202404/mypic_1.jpg
uploads/202404/mypic_2.jpg
......
ในกรณีที่เป็นคัดลอกรูปมาวาง หรือการ จับภาพหน้าจอมาวาง ข้อมูลที่ถูกนำมาใช้งาน
จะไม่ได้เป็นไฟล์ แต่จะเป็นข้อมูลรูปภาพ เมื่อเรามาวาง ก็จะทำการสร้างไฟล์ชื่อ image.png
ให้อัตโนมัติ ชื่อไฟล์ที่จัดเก็บก็จะเป็น
uploads/202404/image_1.png
uploads/202404/image_2.png
......
ตัว ckeditor จะเป็นตัวช่วยสร้างข้อมูลแบบ html ให้เราสามารถนำไปบันทึกลงฐานข้อมูล
และสามารถนำมาแสดงผล ได้ผลลัพธ์เหมือนตอนจัดการกับข้อมูล
ไฟล์ตัวอย่าง ckeditor_upload.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | <?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> <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> |