ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript
07 September 2010จากที่เคยเขียนบทความ หัวข้อ
http://www.ninenik.com/เริ่มใช้_และ_ประยุกต์_CKEditor_ให้ใช้งานง่าย_เต็มความสามารถ_-315.html
และ
http://www.ninenik.com/Integrate_ใช้_Filemanager_ของ_FCKeditor_กับ_CKEditor_แทน_CKFinder_-317.html
โดยทั้งสองกรณี เป็นการใช้งาน ckeditor ด้วย javascript เป็นหลัก การนำไปประยุกต์ใช้งาน สามารถใช้ได้ดี
อย่างไรก็ตาม การใช้ ckeditor ด้วย php ยังเป็นวิธีที่น่าใช้กว่า การใช้แบบ javascript
จึงได้ทำการปรับรูปแบบ การใช้งาน ด้วย php ให้สามารถใช้งาน ได้สะดวก และเต็มความสามารถ โดยได้นำเอา Filemanager มารวมเข้ากับการใช้งานของ ckeditor ด้วย แทนการใช้ ckfinder สำหรับการอัพโหลดรูปภาพ
และยัง คงคุณสมบัติ การใช้งาน ฟังก์ชัน javascript เช่น ฟังก์ขันสำหรับไว้แทรก HTML Code , ฟังก์ชันสำหรับดึงค่ามาใช้งาน และ ฟังก์ชันสำหรับแทนที่ข้อความทั้งหมด ให้สามารถใช้งานร่วมกัน ckeditor ที่สร้างจาก php ได้
เริ่มต้น
1.ดาวน์โหลด ไฟล์ ckeditor ที่มาคู่กับ filemanager แบบพร้อมใช้งานได้ที่
http://www.ninenik.com/download/ckeditor_and_filemanager.rar
แตกไฟล์ แล้วก็อบปี้โฟลเดอร์ ckeditor เอาไว้ใช้งาน
2.สร้างไฟล์ฃื่อ cke_config.php ตามโค้ดด้านล่าง (รูปแบบ Toolbar แบบ เต็ม ด้วย php คลิก)
<?php
$config=array(
"basePath"=>"ckeditor/", // กำหนด path ของ ckeditor
"skin"=>"kama", // kama | office2003 | v2
"language"=>"en", // th / en and more.....
"extraPlugins"=>"uicolor", // เรียกใช้ plugin ให้สามารถแสดง UIColor Toolbar ได้
"uiColor"=>"#92C2C1", // กำหนดสีของ 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=".urlencode("../../connectors/php/connector.php"),
"filebrowserImageBrowseUrl"=>"ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=".urlencode("../../connectors/php/connector.php"),
"filebrowserFlashBrowseUrl"=>"ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=".urlencode("../../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"=>array(
array('Source','-','Templates'),
array('Bold','Italic','Underline','Strike','-','Subscript','Superscript'),
array('NumberedList','BulletedList','-','Outdent','Indent','Blockquote'),
array('JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array('Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','UIColor')
)
);
?>
3.สร้างไฟล์ cke_func.js สำหรับการใช้งานกับคำสั่ง javascript ตามโค้ดด้านล่าง
// JavaScript Document
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!');
}
}
ฟังก์ฃัน InsertHTML สามารถประยุกต์ใช้งานกรณีใช้กับเว็บบอร์ด และมีการอ้างอิง ความคิดเห็น
ฟังก์ชัน SetContents สามารถประยุกต์ใช้ Reset ค่าใน CKEditor ให้ว่างหรือล้างค่าได้
ฟังก์ชัน GetContents สามารถประยุกต์ไว้สำหรับเช็คว่า CKEditor มีค่าว่าหรือไม่ก่อน Submit
ฟังก์ชัน ExecuteCommand สามารถไว้ใช้งานเพิ่มเรียกใช้คำสั่ง ของ CKEditor จากภายนอก เช่น
ExecuteCommand('link',editorObj) เป็นต้น
4.การเรียกใช้งาน
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="cke_func.js"></script>
<?php
include_once("ckeditor/ckeditor.php");
include_once("cke_config.php");
$initialValue = '<p>This is some <strong>sample text</strong>.</p>'; // ค่าเริ่มต้น กรณีดึงข้อมูลมาแก้ไข
$CKEditor = new CKEditor();
// คืนค่าสำหรับใช้งานร่วมกับ javascript
$events['instanceReady'] = 'function (evt) {
return editorObj=evt.editor;
}';
// บรรทัดด้านล่าง เปรียบได้กับการสร้าง textarea ชื่อ editor1
// ตัวแปรรับค่า เป็น $_POST['editor1'] หรือ $_GET['editor1'] ตามแต่กรณี
$CKEditor->editor("editor1", $initialValue,$config,$events);
?>
<br />
<button onclick="InsertHTML('<p>แทรก HTML</p>',editorObj);">แทรก HTML</button>
<button onclick="SetContents('<p>แทนที่ข้อความทั้งหมด</p>',editorObj);">แทนที่ข้อความทั้งหมด</button>
<button onclick="alert(GetContents(editorObj));">แสดงข้อมูลใน CKEditor</button>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3992 25 Sep 08 แสดงชื่อไฟล์เอกสารปัจจุบัน ด้วย location.href อ่าน 2394 03 Sep 10 จัดรูปแบบ url ลิ้งค์ link ด้วย เทคนิค php ได้อย่างง่าย อ่าน 2488 09 Oct 10 สร้าง album และ อัพโหลด รูป photo ขึ้น facebook ด้วย php sdk อ่าน 3487 03 Aug 11 ใช้งาน google chart ตัวใหม่สร้าง poll อย่างง่าย อ่าน 1192 14 Jan 10 รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย อ่าน 6142 19 Feb 10 สร้าง Horizontal Accordion แนวนอน ด้วย jQuery อย่างง่าย อ่าน 3480 08 Oct 08 คำสั่ง SQL SELECT อ่าน 4883 16 Oct 09 สร้างฟังก์ชัน php แปลงตัวเลข เป็นข้อความตัวอักษร ภาษาไทย อ่าน 2154 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 6022 04 Oct 08 การติดตั้ง MySQL บน Windows อ่าน 2955 31 Jul 10 เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป อ่าน 4364 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 4621 03 Nov 08 เปิด popup แล้วให้แสดงแบบ maximize อ่าน 4701 28 Dec 10 ทบทวน ลำดับ การทำงาน keyboard events ของ input text ใน jQuery อ่าน 1857 27 Sep 10 วิธีใช้ css จัดรูปแบบ เนื้อหา contents ที่ต้องการแสดง บน google map อ่าน 2760 11 Dec 09 ทบทวน การเรียกใช้งาน events ใน javascript ที่ใช้ได้สำหรับ ทุก browsers อ่าน 2230 11 May 10 การจัดข้อความ text direction rotation หมุนข้อความ แนวตั้ง ด้วย css ในตาราง อ่าน 3193 23 Jun 11 การสร้าง active เมนู อย่างง่าย ด้วย css และ php อ่าน 1649 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 5624