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

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

่javascript ckeditor emoticon

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

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

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