Javascript
Move to FCKeditor
September 20, 2008 - 12:38am | by poakpongได้ยินชื่อของ FCKeditor เมื่อไม่นานมานี้ หลังจากได้ลองเล่นและหาข้อมูลเกี่ยวกับ drupal โดยก่อนหน้านี้ใช้งาน HTML text editor ที่ชื่อว่า TinyMCE ซึ่งทำงานคล้ายกัน แต่ FCKeditor เหมือนจะจัดการไฟล์อัพโหลดได้ง่ายกว่า
หน้าตาของ FCKeditor แบบ full function
หน้าตาของ TinyMCE แบบ full function
FCKeditor คือชุดโค้ดที่ช่วยให้เราพิมพ์ข้อความในช่อง <textarea> แบบ WYSIWYG คือ แสดงผลได้อย่างที่เราต้องการ โดยไม่จำเป็นต้องรู้ภาษา HTML เลยก็ได้ ที่กล่าวว่าจัดการไฟล์ได้ง่ายกว่า TinyMCE เพราะ FCKeditor ว่ามีระบบ upload, browse มาให้พร้อม ส่วน TinyMCE จะต้องเอาตัวใช้ตัวช่วยคือ MCImageManager และ MCFileManager ซึ่งทั้งสองอันไม่ฟรี (TinyMCE และ FCKeditor เป็นโอเพ่นซอร์ซ)
แถบเครื่องมือ Upload ใน FCKeditor
ผมได้ทดลองเอา FCKeditor ตามติดตั้งใน poakpong.com แทน TinyMCE ที่ใช้อยู่ก่อน โดยวิธีการติดตั้งก็อ่านได้จากเว็บไซต์ http://docs.fckeditor.net มีบอกไว้ละเอียดพอสมควร หรือจะอ่านจาก clinicaestet.ro/FCKeditor/_docs ก็ได้ (เหมือนจะอ่านง่ายกว่า)
สิ่งที่ผมปรับแต่งใช้เอง เช่น
- ลดจำนวน Toolbar ให้เหลือเฉพาะที่ใช้งานประจำ (รายละเอียด Configuration/Toolbar)
- ปรับขนาดช่อง <textarea> ให้พอดีกับเวลาแสดงผลหน้าเว็บ (ดัดแปลงจากกระทู้นี้ .. FCKeditor .. Toolbox textarea)
- ปิดฟังก์ชั่น browse server ให้เหลือแต่ upload อย่างเดียว เพื่อความรวดเร็ว (รายละเอียด Configuration/Built in File Browser และ ImageUpload)
ปรับแต่งแล้วจะได้หน้าตาประมาณนี้ :P
ปล. ไฟล์ทั้งหมดของ FCKeditor มีขนาดใหญ่กว่า TinyMCE สองเท่า แต่รู้สึกว่า FCKeditor จะโหลดได้เร็วกว่า
หาความกว้างหน้าจอด้วย javascript แล้วส่งให้ php ทำงานต่อ
September 10, 2008 - 9:59pm | by poakpongต้องการหาขนาดความกว้างหน้าจอของคนที่เปิดดูเว็บไซต์ ค้นหาจาก google พบคำสั่ง javascript ในการตรวจหาความกว้างและความสูง แต่ที่ผมอยากได้คือให้นำค่าที่ได้ไปใช้งานต่อได้ใน php อีกทอดหนึ่ง
@FordAntiTrust แนะนำว่าให้ส่งค่าผ่านทาง Cookies (ยิ่งงงเข้าไปอีก ฮาา)
ค้นหาอีกรอบได้คำสั่งมาดังนี้ :
ชุดแรกใส่ใน <head> ทำการสร้าง cookies ขึ้นมาแล้วส่งไปยังหน้าที่เราใช้งาน (ก็คือหน้าที่เราต้องการใช้งานนั่นแหละ)
<?php
if(isset($HTTP_COOKIE_VARS["users_resolution"]))
$screen_res = $HTTP_COOKIE_VARS["users_resolution"];
else //means cookie is not found set it using Javascript
{
?>
<script language="javascript">
<!--
writeCookie();
function writeCookie()
{
var the_cookie = "users_resolution="+ screen.width;
document.cookie=the_cookie
location = 'document.php';
}
//-->
</script>
<?php
}
?>
ในส่วน <body> ก็ echo php ตามปกติ
<?php
echo "Your screen resolution is ". $screen_res;
?>
reference: Find Screen Resolution With PHP | PHP Magic Book
ปล.ใครมีวิธีง่ายกว่านี้ ช่วยแนะนำด้วยครับ :-)
Javascript HTML WYSIWYG editor
November 1, 2006 - 10:58pm | by poakpongก่อนหน้านี้เคยได้เอาโค้ด javascript ที่เป็นช่องสำหรับพิมพ์ข้อความ "JS-RichEdit" มาใช้อยู่ก่อนหน้านี้ แต่ด้วยความไม่พอใจในสิ่งที่มี อิอิ... ก็ได้ค้นหามาเรื่อยๆ ล่าสุดเจอโค้ด javascript ที่ทำงานงานได้มากกว่าเดิม "TinyMCE" ซึ่งเป็น open source ที่ถูกนำไปใช้ในโปรแกรมเว็บแอพริเคชั่น wordpress.org
โดยตัว TinyMCE นี้มีให้เราเลือกใช้อยู่ 4 ขนาด (นับจากเครื่องมือ) เช่น Word Style, Simple Style ฯลฯ
แต่ตอนนี้กำลังนำมาปรับใช้ กับเว็บต่างๆที่ดูอยู่ ดูสิว่ามันจะใช้ได้ขนาดไหน (^_^!)
......
หน้าตาของ JS-RichEdit
หน้าตา TinyMCE
ปัญหาการแสดงภาพ PNG ใน Internet Explorer
May 3, 2006 - 10:08pm | by poakpongทำไม Internet Explorer หรือที่เรียกกันสั้นๆว่า IE (v.6) เวอร์ชั่นล่าสุด ถึงทำงานร่วมกับภาพฟอร์แมท .png ได้ไม่สวยงาม (ในตอนนี้ขอไม่นับรวม IE ตัวที่เป็น beta (v.7) ที่จะเป็นรุ่นถัดไปนะ) แต่ถ้าเปิดด้วย browser อื่นๆ ไม่เห็นมีปัญหา - ทั้ง Firefox หรือ Safari
ล่าสุดก็ลอง search หา script ที่ช่วยให้ IE สามารถแสดงผลได้สวยงาม ยกตัวอย่าง logo เว็บเราเอง ตอนแรกก็พยายามเลี่ยงไปใช้ฟอร์แมทอื่นๆ เช่น .jpg หรือ .gif แต่มันไม่สวยเท่า .png อ่ะ
เริ่มต้นจากโฟโตช็อป ก็กำหนดให้เป็นไม่มีพื้นหลัง (Transparency)
พอลองแสดงผลกับ IE กลายเป็นมีพื้นที่ไม่ต้องการปรากฎขึ้น แต่กับ Firefox ไม่มีอะไรเกิดขึ้นเลย
เลยต้องไปหา script มาใส่ในไว้ใน Head อ้างอิงจากเว็บไซต์ PNG in Windows IE: How To Use
พอใส่ java script เข้าไปคราวนี้แสดงผลได้สวยงามตามที่ต้องการแล้ว อิอิ
...
references:
- ความหมายของ PNG format ภาษาไทยแบบย่อ
- ความหมายของ PNG format ภาษาอังกฤษแบบเต็มๆ
- Internet Explorer Version 6 & Version 7 beta
- Firefox 1.5.0.2 + Thai WBR เวอร์ชั่นตัดคำภาษาไทยสวยงาม
