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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
ckeditor emoticon ่javascript

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

ดูแล้ว 15,185 ครั้ง


ตัวอย่างต่อไปนี้ เป็นลูกเล่นเล็กน้อย สำหรับนำไปใช้งาน กับ 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."'/>&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>

 





กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ