การสร้างปุ่ม Insert image อย่างง่ายสำหรับ CKEditor
CKEditor นั้นเป็น HTML Editor ที่ได้รับความนิยม แต่ว่าทุกคนก็น่าจะเคยเจอเป็นหาเรื่องการเพิ่มรูป เพราะว่าตัวระบบของ CKEditor ตัวฟรีนั้น ไม่ได้ Finder ให้มาด้วย เวลาจะใส่รูปต้องระบุเป็น URL เอาเท่านั้น หรือไม่ก็ต้องซื้อ CKFinder ซึ่งราคาแพงเวอร์ (349 USD) อย่างแพง เอาแล้วเราทำไงดี ถ้าไม่อยากเสียตัง
ก็เขียนเอาเองสิครับ เพราะว่า CKEditor ก็เป็น Opensource ตัวหนึ่ง มี API ให้เราเขียน Plugin เพิ่มเองได้ด้วย ถ้าเราต้องการอะไร ก็เขียนเอาเอง แต่ว่า จริงๆ แล้วก็มี Plugin finder ฟรีๆ ให้ใช้เเหมื่อนกัน แต่ว่าก็ดีบ้างไม่ดีบ้าง หรือไม่ก็ไม่ตรงกับความต้องการของเราซะทีเดียว
ส่วนโค้ดด้านล่างนี้ก็จะเป็น คำสั่งให้เกิด event แทรกรูปเข้าไปใน editor
และตอนต้องกำหนดค่า config ของ CKEditor ก็ต้องเปิด allow content สำหรับ editor ด้วย เพราะว่าค่า default ของ editor ปิดไว้
อันนี้ก็เป็นการเขียนอย่างง่ายๆ ใครที่อ่านอยู่ก็ลองไปประยุกค์กันดูน่ะครับ
ก็เขียนเอาเองสิครับ เพราะว่า CKEditor ก็เป็น Opensource ตัวหนึ่ง มี API ให้เราเขียน Plugin เพิ่มเองได้ด้วย ถ้าเราต้องการอะไร ก็เขียนเอาเอง แต่ว่า จริงๆ แล้วก็มี Plugin finder ฟรีๆ ให้ใช้เเหมื่อนกัน แต่ว่าก็ดีบ้างไม่ดีบ้าง หรือไม่ก็ไม่ตรงกับความต้องการของเราซะทีเดียว
ส่วนโค้ดด้านล่างนี้ก็จะเป็น คำสั่งให้เกิด event แทรกรูปเข้าไปใน editor
$('#insert-image').click(function() {
CKEDITOR.instances['LessonEditor'].insertHtml('');
});
และตอนต้องกำหนดค่า config ของ CKEditor ก็ต้องเปิด allow content สำหรับ editor ด้วย เพราะว่าค่า default ของ editor ปิดไว้
extraAllowedContent: 'img[!src,alt,width,height]'
อันนี้ก็เป็นการเขียนอย่างง่ายๆ ใครที่อ่านอยู่ก็ลองไปประยุกค์กันดูน่ะครับ
ความคิดเห็น
แสดงความคิดเห็น