Move to FCKeditor
poakpong
20 September 2008
ได้ยินชื่อของ 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 จะโหลดได้เร็วกว่า
หน้าตาของ 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 ทำงานต่อ
poakpong
10 September 2008
ต้องการหาขนาดความกว้างหน้าจอของคนที่เปิดดูเว็บไซต์ ค้นหาจาก google พบคำสั่ง javascript ในการตรวจหาความกว้างและความสูง แต่ที่ผมอยากได้คือให้นำค่าที่ได้ไปใช้งานต่อได้ใน php อีกทอดหนึ่ง
@FordAntiTrust แนะนำว่าให้ส่งค่าผ่านทาง Cookies (ยิ่งงงเข้าไปอีก ฮาา)
ค้นหาอีกรอบได้คำสั่งมาดังนี้ :
ชุดแรกใส่ใน <head> ทำการสร้าง cookies ขึ้นมาแล้วส่งไปยังหน้าที่เราใช้งาน (ก็คือหน้าที่เราต้องการใช้งานนั่นแหละ)
<?php
if(isset($HTTP_COOKIE_VARS["users_resolution"]))
$screen_res = $HTTP_COOKIE_VARS["users_resolution"];
Javascript HTML WYSIWYG editor
poakpong
1 November 2006
ก่อนหน้านี้เคยได้เอาโค้ด javascript ที่เป็นช่องสำหรับพิมพ์ข้อความ "JS-RichEdit" มาใช้อยู่ก่อนหน้านี้ แต่ด้วยความไม่พอใจในสิ่งที่มี อิอิ...
ปัญหาการแสดงภาพ PNG ใน Internet Explorer
poakpong
3 May 2006
ทำไม Internet Explorer หรือที่เรียกกันสั้นๆว่า IE (v.6) เวอร์ชั่นล่าสุด ถึงทำงานร่วมกับภาพฟอร์แมท .png ได้ไม่สวยงาม (ในตอนนี้ขอไม่นับรวม IE ตัวที่เป็น beta (v.7) ที่จะเป็นรุ่นถัดไปนะ) แต่ถ้าเปิดด้วย browser อื่นๆ ไม่เห็นมีปัญหา - ทั้ง Firefox หรือ Safari
ล่าสุดก็ลอง search หา script ที่ช่วยให้ IE สามารถแสดงผลได้สวยงาม ยกตัวอย่าง logo เว็บเราเอง ตอนแรกก็พยายามเลี่ยงไปใช้ฟอร์แมทอื่นๆ เช่น .jpg หรือ .gif แต่มันไม่สวยเท่า .png อ่ะ
เริ่มต้นจากโฟโตช็อป ก็กำหนดให้เป็นไม่มีพื้นหลัง (Transparency)
