Integrate ใช้ Filemanager ของ FCKeditor กับ CKEditor แทน CKFinder
23 August 2010จากหัวข้อ เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ
http://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 ไปใช้งาน
ได้ที่ http://www.ninenik.com/download/ckeditor_integrate_filemanager.rar
หลักจากทำการดาวน์โหลดแล้ว ให้ทำการแตกไฟล์ จะมีโฟลเดอร์ filemanager อยู่ ให้ก็อบปี้ทั้งโฟลเดอร์ ไปไว้ในโฟลเดอร์ CKEditor ( * เนื้อหาต่อเนื้องจาก http://www.ninenik.com/เริ่มใช้_และ_ประยุกต์_CKEditor_ให้ใช้งานง่าย_เต็มความสามารถ_-315.html)
จากนั้นในไฟล์ cke_config.js ( * เนื้อหาต่อเนื้องจาก http://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 กรณีที่ไม่สามารถอัพโหลดไฟล์ได้
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 3438 13 Oct 08 คำสั่ง SQL ORDER BY อ่าน 7383 01 Nov 10 ประยุกต์ ฟังก์ชัน animate ใน jQuery เลื่อน scroll หน้าเพจ อ่าน 2307 11 Feb 11 แนะนำ การใช้งาน jQuery quicksearch plugin อ่าน 3017 08 Jun 09 วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่าย อ่าน 6390 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 4651 07 Jun 09 กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย อ่าน 5633 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 5624 05 Nov 08 แสดงป้ายโฆษณา banner แบบสุ่ม random ด้วย ajax อย่างง่าย อ่าน 4342 23 Aug 10 Integrate ใช้ Filemanager ของ FCKeditor กับ CKEditor แทน CKFinder อ่าน 2311 04 Oct 08 SQL คืออะไร อ่าน 7496 08 Oct 08 การกำหนดสี scrollbar ของ textarea อ่าน 3277 19 Feb 10 สร้าง Horizontal Accordion แนวนอน ด้วย jQuery อย่างง่าย อ่าน 3480 05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 13030 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 6022 22 Mar 10 ทบทวนคำสั่ง break และ continue ใน javascript อ่าน 2426 02 Apr 10 สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css อ่าน 4630 25 Sep 08 CSS แทรกโค๊ดในเว็บโดยมีหมายเลขบรรทัดกำกับ อ่าน 2763 06 May 10 สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย อ่าน 4033 09 May 10 ดึงค่า ข้อมูล จาก xml ไฟล์ มากำหนดเป็นตัวแปร array ด้วย php อ่าน 2149