แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor

02 December 2010 เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee

emoticon ckeditor ่javascript

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

ตัวอย่างต่อไปนี้ เป็นลูกเล่นเล็กน้อย สำหรับนำไปใช้งาน กับ ckeditor เพื่อแทรก emoticon หรือรูปแสดง
อารมณ์ความรู้สึก ให้กับข้อความที่ต้องการโพส เหมาะกับการนำไปใช้งานการสร้าง ระบบเว็บบอร์ด

ดาวน์โหลด ไฟล์ emoticon ได้ที่
http://www.ninenik.com/download/emoticon.rar

แนวทางการประยุกต์นี้ เป็นการใช้งานร่วมกับ ckeditor ดังนั้นสามารถศึกษาการใช้งาน ckeditor ได้จาก
หัวข้อต่อไปนี้
http://www.ninenik.com/เริ่มใช้_และ_ประยุกต์_CKEditor_ให้ใช้งานง่าย_เต็มความสามารถ_-315.html
http://www.ninenik.com/Integrate_ใช้_Filemanager_ของ_FCKeditor_กับ_CKEditor_แทน_CKFinder_-317.html
http://www.ninenik.com/ใช้_ckeditor_กับ_filemanager_ด้วย_php_รองรับ_ฟังก์ชัน_javascript_-325.html
http://www.ninenik.com/ทางเลือก_อัพโหลดไฟล์ใน_ckeditor_ด้วย_ajax_file_manager-378.html

ตัวอย่างโค้ดทดสอบ ใช้ไฟล์ ckeditor จากหัวข้อ http://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."'/>&nbsp;";	
		}

	}
}
?> 
</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>