ตัวอย่างต่อไปนี้ เป็นลูกเล่นเล็กน้อย สำหรับนำไปใช้งาน กับ ckeditor เพื่อแทรก emoticon หรือรูปแสดง
อารมณ์ความรู้สึก ให้กับข้อความที่ต้องการโพส เหมาะกับการนำไปใช้งานการสร้าง ระบบเว็บบอร์ด
ดาวน์โหลด ไฟล์ emoticon ได้ที่
https://www.ninenik.com/download/emoticon.rar
แนวทางการประยุกต์นี้ เป็นการใช้งานร่วมกับ ckeditor ดังนั้นสามารถศึกษาการใช้งาน ckeditor ได้จาก
หัวข้อต่อไปนี้
https://www.ninenik.com/เริ่มใช้_และ_ประยุกต์_CKEditor_ให้ใช้งานง่าย_เต็มความสามารถ_-315.html
https://www.ninenik.com/Integrate_ใช้_Filemanager_ของ_FCKeditor_กับ_CKEditor_แทน_CKFinder_-317.html
https://www.ninenik.com/ใช้_ckeditor_กับ_filemanager_ด้วย_php_รองรับ_ฟังก์ชัน_javascript_-325.html
https://www.ninenik.com/ทางเลือก_อัพโหลดไฟล์ใน_ckeditor_ด้วย_ajax_file_manager-378.html
ตัวอย่างโค้ดทดสอบ ใช้ไฟล์ ckeditor จากหัวข้อ https://www.ninenik.com/ทางเลือก_อัพโหลดไฟล์ใน_ckeditor_ด้วย_ajax_file_manager-378.html
<!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>
<style type="text/css">
#emotiondiv img{
cursor:pointer;
}
</style>
</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 />
<div id="emotiondiv" style="width:750px;">
<?php
$allowed_types=array('jpg','jpeg','gif','png');
$dir ="images/emoticon/";
$files1 = scandir($dir);
foreach($files1 as $key=>$value){
if($key>1){
$file_parts = explode('.',$value);
$ext = strtolower(array_pop($file_parts));
if(in_array($ext,$allowed_types)){
echo "<img style='width:50px;' src='".$dir.$value."'/> ";
}
}
}
?>
</div>
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#emotiondiv img").click(function(){
fullpath=$.trim($(this).attr("src"));
InsertHTML('<img src="'+fullpath+'" style="width:50px;" />',editorObj);
});
});
</script>
</body>
</html>
