จากที่เคยเขียนบทความ หัวข้อ
https://www.ninenik.com/เริ่มใช้_และ_ประยุกต์_CKEditor_ให้ใช้งานง่าย_เต็มความสามารถ_-315.html
และ
https://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 แบบพร้อมใช้งานได้ที่
https://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>
