จากหัวข้อ เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ
https://www.ninenik.com/เริ่มใช้_และ_ประยุกต์_CKEditor_ให้ใช้งานง่าย_เต็มความสามารถ_-315.html
ที่เคยกล่าวมาก่อนหน้า นั้น ยังไม่ได้นำเสนอ คุณสมบัติสำหรับการอัพโหลดไฟล์ ปกติเราสามารถใช้งาน CKFinder ได้โดยง่าย ดังวิธีการ ตามลิ้งค์ด้านล่าง
http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration
แต่โดยส่วนตัว จะฃอบ Filemanager ซึ่งเป็นตัวที่มาพร้อมกับ FCKeditor
เมื่อต้องใช้ CKEditor และก็ยังอยากใช้งาน Filemanager จึงจำเป็นต้องหาวิธี Integrate สองส่วนนี้ให้ใช้งานร่วมกัน สำหรับผู้ที่สนใจจะใช้งาน สามารถดาวน์โหลด ไฟล์ Filemanager ไปใช้งาน
ได้ที่ https://www.ninenik.com/download/ckeditor_integrate_filemanager.rar
หลักจากทำการดาวน์โหลดแล้ว ให้ทำการแตกไฟล์ จะมีโฟลเดอร์ filemanager อยู่ ให้ก็อบปี้ทั้งโฟลเดอร์ ไปไว้ในโฟลเดอร์ CKEditor ( * เนื้อหาต่อเนื้องจาก https://www.ninenik.com/เริ่มใช้_และ_ประยุกต์_CKEditor_ให้ใช้งานง่าย_เต็มความสามารถ_-315.html)
จากนั้นในไฟล์ cke_config.js ( * เนื้อหาต่อเนื้องจาก https://www.ninenik.com/เริ่มใช้_และ_ประยุกต์_CKEditor_ให้ใช้งานง่าย_เต็มความสามารถ_-315.html )
ให้กำหนดส่วนเพิ่มเติมสำหรับการอัพโหลดไฟล์ ดังนี้
filebrowserBrowseUrl: 'ckeditor/filemanager/browser/default/browser.html?Connector='+encodeURIComponent('../../connectors/php/connector.php'),
filebrowserImageBrowseUrl : 'ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector='+encodeURIComponent('../../connectors/php/connector.php'),
filebrowserFlashBrowseUrl : 'ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector='+encodeURIComponent('../../connectors/php/connector.php'),
filebrowserUploadUrl : 'ckeditor/filemanager/connectors/php/upload.php',
filebrowserImageUploadUrl : 'ckeditor/filemanager/connectors/php/upload.php?Type=Image',
filebrowserFlashUploadUrl : 'ckeditor/filemanager/connectors/php/upload.phpType=Flash',
สุดท้ายจะได้ไฟล์ cke_config.js แบบเต็ม ดังนี้
// JavaScript Document
var cke_config={
skin:'kama', // kama | office2003 | v2
language:'en', // th / en and more.....
extraPlugins :'uicolor',// เรียกใช้ plugin ให้สามารถแสดง UIColor Toolbar ได้
uiColor :'#9C3', // กำหนดสีของ ckeditor
extraPlugins : 'autogrow', // เรียกใช้ plugin ให้สามารถขยายขนาดความสูงตามเนื้อหาข้อมูล
autoGrow_maxHeight : 400, // กำหนดความสูงตามเนื้อหาสูงสุด ถ้าเนื้อหาสูงกว่า จะแสดง scrollbar
enterMode: 2,// กดปุ่ม Enter -- 1=แทรกแท็ก <p> 2=แทรก <br> 3=แทรก <div>
shiftEnterMode :1,// กดปุ่ม Shift กับ Enter พร้อมกัน 1=แทรกแท็ก <p> 2=แทรก <br> 3=แทรก <div>
height :200, // กำหนดความสูง
width :800, // กำหนดความกว้าง * การกำหนดความกว้างต้องให้เหมาะสมกับจำนวนของ Toolbar
/* fullPage : true, // กำหนดให้สามารถแก้ไขแบบเโค้ดเต็ม คือมีแท็กตั้งแต่ <html> ถึง </html>*/
filebrowserBrowseUrl: 'ckeditor/filemanager/browser/default/browser.html?Connector='+encodeURIComponent('../../connectors/php/connector.php'),
filebrowserImageBrowseUrl : 'ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector='+encodeURIComponent('../../connectors/php/connector.php'),
filebrowserFlashBrowseUrl : 'ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector='+encodeURIComponent('../../connectors/php/connector.php'),
filebrowserUploadUrl : 'ckeditor/filemanager/connectors/php/upload.php',
filebrowserImageUploadUrl : 'ckeditor/filemanager/connectors/php/upload.php?Type=Image',
filebrowserFlashUploadUrl : 'ckeditor/filemanager/connectors/php/upload.phpType=Flash',
toolbar : [
['Source','-','Templates'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','UIColor']
]
}
function InsertHTML(htmlValue,editorObj){// ฟังก์ขันสำหรับไว้แทรก HTML Code
if(editorObj.mode=='wysiwyg'){
editorObj.insertHtml(htmlValue);
}else{
alert( 'You must be on WYSIWYG mode!');
}
}
function SetContents(htmlValue,editorObj){ // ฟังก์ชันสำหรับแทนที่ข้อความทั้งหมด
editorObj.setData(htmlValue);
}
function GetContents(editorObj){// ฟังก์ชันสำหรับดึงค่ามาใช้งาน
return editorObj.getData();
}
function ExecuteCommand(commandName,editorObj){// ฟังก์ชันสำหรับเรียกใช้ คำสั่งใน CKEditor
if(editorObj.mode=='wysiwyg'){
editorObj.execCommand(commandName);
}else{
alert( 'You must be on WYSIWYG mode!');
}
}
การใฃ้งาน ให้ตรวจสอบโฟลเดอร์ userfiles ซึ่งจะถูกสร้างไว้สำหรับการใช้งานเริ่มต้น
และตรวจสอบการกำหนด permission กรณีที่ไม่สามารถอัพโหลดไฟล์ได้
