แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor
02 December 2010ตัวอย่างต่อไปนี้ เป็นลูกเล่นเล็กน้อย สำหรับนำไปใช้งาน กับ 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."'/> ";
}
}
}
?>
</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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
06 Oct 10 การใช้งาน graph api ของ facebook ด้วย php sdk อ่าน 5024 23 Jun 11 การสร้าง active เมนู อย่างง่าย ด้วย css และ php อ่าน 2954 04 May 10 ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter อ่าน 3819 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรองพื้นฐาน อ่าน 2955 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2806 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 27469 10 Dec 09 ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea อ่าน 4685 22 Sep 11 แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery อ่าน 2024 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 5411 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4911 22 Mar 10 ทบทวนคำสั่ง break และ continue ใน javascript อ่าน 2865 28 Oct 08 ดึงข้อมูลจาก text ไฟล์มาแสดงด้วย ajax อ่าน 5918 25 Sep 08 การจัดรูปแบบทศนิยมของตัวเลขใน javascript อ่าน 6199 16 Dec 11 ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู อ่าน 3479 17 Oct 08 แสดงตัวอย่างรูป ก่อน upload image preview berfore upload อ่าน 10654 15 Oct 08 สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ อ่าน 2933 16 Oct 08 CSS กับการตกแต่งกรอบรูปภาพ อ่าน 11441 05 Nov 08 CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 10700 07 Jul 10 เทคนิค php ดึงข้อมูล comment จาก facebook มาใช้งาน อ่าน 6408 26 Feb 09 สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google อ่าน 4015