[แชร์ความรู้] ปัญหาการบันทึกข้อมูลจาก CKEditor ผ่าน Jquery
โพสต์แล้ว: 08/05/2012 6:26 pm
พอดีได้งานเขียนเว็บด้วย CI FW แล้วต้องใช้ CKEditor กับ Jquery ก็ได้ไปเจอปัญหานึงของ Editor คือพิมพ์ข้อมูลเองใน Editor แล้วสามารถบันทึกได้ แต่พอไปก็อบปี้ข้อมูลจากที่อื่นมาใส่มันบันทึกไม่ได้ จากที่ตรวจแล้วแล้วเป็นเพราะ Editor มันสร้างโค้ด html ใส่ไปให้ซึ่งอะไรที่มี & นำหน้าจะไม่สามารถส่งข้อมูลไปได้ เช่น “ หรือ ” พวกนี้จะส่งไปไม่ได้
วิธีแก้คือ ใช้ฟังก์ชั่น encodeURIComponent(String) ของ javascript เช่น
กรณี Uploadify
ด้านบนเป็นการส่งค่าที่ละค่านะครับ
สำหรับใครที่ต้องการส่งค่าทั้ง form เลยก็สามารถทำได้โดยใช้ $("#frm").serialize() ของ Jquery เองนั้นแหละครับ
แต่สำหรับ CKEditor แล้วอาจจะต้องใช้ Jquery ที่มันมีมาให้ด้วย ซึ่งผมก็ไม่ได้ลองว่าถ้าเป็น Jquery ทั่วไปสามารถใช้ได้มั๊ย
โดย Jquery ที่ CKEditor มีมาให้จะอยู่ที่ ckeditor/adapters/jquery.js
ให้นำไปใส่ไว้ที่โค้ดหน้าที่ใช้งานนะครับ
ส่วนการอ่านค่าจาก editor ก็ใช้ $("#element").val() หรือ $("#frm").serialize() ก็แล้วแต่การใช้งานนะครับ
เผื่อเป็นประโยชน์กับมือใหม่ที่เจอปัญหาเดียวกันนะครับ
วิธีแก้คือ ใช้ฟังก์ชั่น encodeURIComponent(String) ของ javascript เช่น
กรณี Uploadify
โค้ด: เลือกทั้งหมด
$('#file_upload').uploadifySettings("scriptData",{
'topic':$("#topic").val(),
'typeid':$("#typeid option:selected").val(),
'content':encodeURIComponent($("#content").val()),
'attach':attach
});
$('#file_upload').uploadifySettings("script","<?=base_url();?>admin/news/insert");
$('#file_upload').uploadifySettings("folder","images/news");
$('#file_upload').uploadifyUpload();
สำหรับใครที่ต้องการส่งค่าทั้ง form เลยก็สามารถทำได้โดยใช้ $("#frm").serialize() ของ Jquery เองนั้นแหละครับ
แต่สำหรับ CKEditor แล้วอาจจะต้องใช้ Jquery ที่มันมีมาให้ด้วย ซึ่งผมก็ไม่ได้ลองว่าถ้าเป็น Jquery ทั่วไปสามารถใช้ได้มั๊ย
โดย Jquery ที่ CKEditor มีมาให้จะอยู่ที่ ckeditor/adapters/jquery.js
ให้นำไปใส่ไว้ที่โค้ดหน้าที่ใช้งานนะครับ
ส่วนการอ่านค่าจาก editor ก็ใช้ $("#element").val() หรือ $("#frm").serialize() ก็แล้วแต่การใช้งานนะครับ
เผื่อเป็นประโยชน์กับมือใหม่ที่เจอปัญหาเดียวกันนะครับ