Integrate ใช้ Filemanager ของ FCKeditor กับ CKEditor แทน CKFinder

23 August 2010 เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee

filemanager ckfinder fckeditor ckeditor

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ filemanager ckfinder fckeditor ckeditor

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว
ลองดูที่ใหม่กว่า ckeditor เป็นแนวทางแทน

จากหัวข้อ เริ่มใช้ และ ประยุกต์ 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 กรณีที่ไม่สามารถอัพโหลดไฟล์ได้

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ