บทความก่อนเป็นการ config CKEditor แบบ javascipt นะครับรอบนี้เปลี่ยนเป็นการ config แบบ PHP เป็น Code ที่ผมดัดแปลงปรับแต่งมาจาก เว็บ ninenik.com คุณความดีนี้ และคำขอบคุณทุกคำขอบคุณผมขอยกให้ ninenik.com..... ไปดู Code กันดีกว่าครับ.....
Code ที่ท่านต้องมี ตามรูปครับ
ส่วน ที่ให้ download จะไม่มีโฟล์เดอร์ ckeditor นะครับ ท่านอาจจะ download มาจากบทความก่อนๆ
ก็ได้ หรือ http://ckeditor.com ก็แล้วแต่ท่านจะทรงโปรดละครับ.....
ก่อนอื่นมา config file cke_config.php กันก่อน ก็มี 2 ส่วน คือ กลุ่มปรับแต่งหน้าตา กับกลุ่ม
เครื่องมือของ CKEditor
Code ที่เสร็จแล้ว
ไฟล์ cke_config.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, // กำหนดความสูงตามเนื้อหาสูงสุด
"enterMode"=>2, // กดปุ่ม Enter -- 1=แทรกแท็ก <p> 2=แทรก <br> 3=แทรก <div>
"shiftEnterMode"=>1, // กดปุ่ม Shift กับ Enter พร้อมกัน 1=แทรกแท็ก <p> 2=แทรก<br>
//3=แทรก <div>
"height"=>200, // กำหนดความสูง
"width"=>500, // กำหนดความกว้าง * การกำหนดความกว้างต้องให้เหมาะสมกับจำนวนของ Toolbar
"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')
)
);
แล้วก็มาสร้าง ไฟล์ ckemotion.php เริ่มด้วยการ include jquery ไฟล์ ckemotion.php
<script type="text/javascript" src="jquery.js"></script>
จากนั้นสร้างฟังก์ชัน javascript สำหรับการ Insert HTML Value เข้าไปที่ CKEditor ดังนี้
<script type="text/javascript">
function InsertHTML(htmlValue,editorObj){
if(editorObj){
editorObj.insertHtml(htmlValue);
}
}
สร้างตัวแปรสำหรับเรียก CKEditor ขึ้นมาใช้งาน เริ่มด้วยการ include
include_once("ckeditor/ckeditor.php");
include_once("cke_config.php");
$ckeditDb = "Bookneo.com";//ตัวแปรนี้ท่านสามารถที่จะดึงข้อมูลจาก database ขึ้นมาเพื่อแก้ไขได้
$CKEditor = new CKEditor();
$events['instanceReady'] = 'function (evt) {
return editorObj=evt.editor;
}';
จากนั้นก็มาสร้าง form พร้อมทั้งเรียกใช้งาน CKEditor ดังนี้
<form name="myform" method="post" action="">
<?php
$CKEditor->editor("editor1","$ckeditDb",$config,$events);//เปรียบเหมือนtextarea
//กำหนดให้ id="editor1" หมายถึงตัวแปรที่เก็บค่าใน CKEditor นั่นเอง
?>
<input type="submit" name="submit" value="Submit"/>
</form>
รูปตัวอย่าง
สำหรับการเรียกใช้ CKEditor มีแค่นี้ ที่เหลือเป็นเรื่องของการใส่ emoticon กับการคลิกเพื่อส่งค่า
ดึง emoticon ขึ้นมาแสดง ด้วย code นี้
<div id="emotion"> </div> //ครอบด้วย div ก่อน
$dir ="emoticon"; //ที่เก็บตัว emoticon
$files1 = scandir($dir); //ใช้ฟังก์ชัน scandir()
foreach($files1 as $key=>$value){ //วนลูปออกมา มีเท่าไหร่ก็ออกมาหมด โอม....
if($key>1){
$dir = "emoticon/$value"; //นำค่าที่ได้มาใส่ Path นำหน้าเอาไว้เวลาเรียกใช้ก็ echo $dir ตัวเดียว
echo "<img height='40' src='$dir'/>";
}
}
มาถึงตอนนี้เราก็จะเห็นตัว emoticon แล้ว ต่อไปเมื่อเราคลิกที่ ตัว emoticon เขาก็จะวิ่งขึ้นไปที่ CKEditor
ตรงนี้เราจะใช้ jQuery .click(function)ตามนี้
<script type="text/javascript">
$(function(){
$("#emotion img").click(function(){
fullpath=$.trim($(this).attr("src"));
InsertHTML('<img src="'+fullpath+'" style="width:50px;" />',editorObj);
});
});
</script>
แต่ pointer ยังไม่เป็นรูปมือ ดังนั้นเราก็ต้องกำหนด CSS ให้ดั่งนี้
#emotion img{
cursor:pointer;
}
Code ที่เสร็จแล้ว
ไฟล์ ckemotion.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function InsertHTML(htmlValue,editorObj){
if(editorObj){
editorObj.insertHtml(htmlValue);
}
}
</script>
<style type="text/css">
#emotion img{
cursor:pointer;
}
</style>
</head>
<body>
<?php
include_once("ckeditor/ckeditor.php");
include_once("cke_config.php");
$ckeditDb = "Bookneo.com";
$CKEditor = new CKEditor();
$events['instanceReady'] = 'function (evt) {
return editorObj=evt.editor;
}';
?>
<form name="myform" method="post" action="">
<?php
$CKEditor->editor("editor1","$ckeditDb",$config,$events);
?>
<input type="submit" name="submit" value="Submit"/>
</form>
<br/>
<div id="emotion" style="width:480px;border:1px solid #999999;
height:130px;padding:10px;overflow: auto;">
<?php
$dir ="emoticon";
$files1 = scandir($dir);
foreach($files1 as $key=>$value){
if($key>1){
$dir = "emoticon/$value";
echo "<img height='40' src='$dir'/>";
}
}
?>
</div>
<script type="text/javascript">
$(function(){
$("#emotion img").click(function(){
fullpath=$.trim($(this).attr("src"));
InsertHTML('<img src="'+fullpath+'" style="width:50px;" />',editorObj);
});
});
</script>
</body>
</html>
คลิกแล้ว emoticon ไม่ขึ้นครับ
ตอบลบ