Submit form ที่มี CKEditor
ขอสอบถามเรื่องการ Submit form ที่มี CKEditor ครับ
ผมสร้างฟอร์มเพื่อจะให้ผู้ใช้งานพิมพ์ข้อความ โดยใช้ CKEditor เข้ามาช่วยในการพิมพ์ข้อความ
หน้าที่ผมเรียกขึ้นมานี้จะถูกเรียกผ่าน Ajax เข้ามาไว้ใน tag div ปกติ ... CKEditor ก็ทำงานได้อย่างปกติครับ
ตอนที่ replace CKEditor เข้ามานั้นผมก็ใช้ CKEDITOR.editor.replace('element_id'); โดยจะ Replace ขึ้นมาหลังจากโหลดหน้านี้เรียบร้อยแล้ว
ขั้นต่อไปผมจะต้องทำการ Submit form นี้เพื่อนำข้อมูลไปใช้งานต่อไป โดยที่ถ้าเป็นการ Submit จากปุ่ม Submit ปกติจะได้ข้อมูลตามปกติถูกต้องทุกอย่างครับ
แต่ถ้าใช้ปุ่ม type button แล้วใช้ event Onclick เพื่อเรียกฟังก์ชั่น แล้วส่ง Object form ไปตามปกติ ปรากฏว่าค่าที่ได้จะเป็นค่าตั้งต้น(ค่าเดิม)ของ element ก่อนที่จะ replace สะงั้น ผมลอง alert ค่าต่างๆออกมาดูก็ได้ค่าจากฟอร์มครบทุกตัวนะครับ แต่ตรง CKEditor กลับได้ค่าก่อน replace ลงไปเท่านั้น
ผมลองเข้าไปดูตัวอย่างของคนอื่นในกรณีเดียวกัน จะทำได้ก็ต่อเมื่อสร้าง Obj ขึ้นมาในหน้าเดียวกับ php นั้นเลย ดังนี้ครับ
<p>
<textarea id="editor1" name="editor1">sample text</textarea>
</p>
..............................
<script type="text/javascript">
var editorObj=CKEDITOR.replace( 'editor1',cke_config);
</script>
.............................
<button onclick="alert(editorObj.getData())">แสดงข้อมูลใน CKEditor</button>
.......................................
จากด้านบน เมื่อกดปุ่มจะสามารถทำงานได้ครับ โดย editorObj ถูกสร้างขึ้นมาและสามารถใช้งานได้เลยในหน้านี้
ส่วนของผมซึ่ง editorObj ถูกสร้างขึ้นมาตั้งแต่ตอนเรียกด้วย Ajax แล้วจึงไม่สามารถอ้าง editorObj ได้เมื่อใช้ปุ่มแบบเดียวกันกับด้านบน
ปัญหาในแบบที่ผมทำก็คือ จะทำอย่างไรให้สามารถส่ง editorObj ที่ถูกต้องเพื่อนำไปใช้งานต่อไปได้น่ะครับ
//<![CDATA[
var editor = CKEDITOR.appendTo('board_editor', {
language:"th",
toolbar:"Comment"
});
new GForm('board-form', '{FORMACTION}', 'wait', true, function(){
$E('board_detail').value = editor.getData();
return true;
}).onsubmit(doFormSubmit);
//]]>
</script>
จริงๆแล้วคำสั่งด้านบน ที่ document ของ CKEDitor ก็มีบอก แนวคิดก็คือ
1.สร้าง input แบบ hidden มา 1 ตัว เอาไว้ submit เนื่องจาก CKEditor จะไม่ยอม submit ให้ (board_detail)
2.ฟังก์ชั่น onsubmit ของฟอร์ม ให้อ่านค่าจาก Editor ไปไว้ยัง Input ก่อน Hidden
Javascript สามารถทำงานได้หากผูกกับ Event ครับ
<form onsubmit = function(){document.getEementById('board_detail').value = editor.getData();return true}....
ขอบคุณมากครับ ช่วงนี้ต้องทำโปรเจคอีกอันเลยยังไม่ได้ทำตามที่คุณ Goragod แนะนำเลย ถ้าได้ผลอย่างไรแล้วจะนำมาแบ่งปันนะครับ....