บทความในหมวด ‘TinyMCE’
วิธีบังคับไม่ให้ tinyMCE ใช้แท็ก p แทน br
ถ้าท่านเป็นคนหนึ่งที่ใช้ tinyMCE เป็นตัวรับอินพุตข้อมูลจากหน้าเว็บ สิ่งหนึ่งที่จะเจอก็คือ เมื่อป้อนข้อมูลแล้วต้องการจะให้มันขึ้นบรรทัดใหม่ เมื่อกด enter มันจะใช้แท็ก p ขึ้นพารากราฟใหม่เลย ซึ่งความห่างของบรรทัดนั้น ก็จะห่างกันมากทีเดียว ถ้าต้องการจะบังคับให้ขึ้นบรรทัดใหม่แบบ br ต้องกดปุ่ม shift ค้างไว้แล้วกด enter มันก็จะใช้แท็ก br แทน
มาเปลี่ยน skin ให้กับ TinyMCE กันเถอะ
ตัว TinyMCE จะมาพร้อมกับ skin 2 ตัว ในโหมด advanced คือ default กับ o2k7 ซึ่งถ้าตอนเรียกใช้ เราไม่ได้ระบุว่าจะให้ใช้
skin ตัวไหน TinyMCE ก็จะใช้หน้าตาแบบ default ถ้าเกิดเบื่อหน้าตาแบบ default แล้ว เราก็มาเปลี่ยนมันซะเถอะ วิธีก็ไม่มีไรมาก
แค่ตอนเราเรียกใช้ TinyMCE เราก็ระบุ skin ให้มันด้วย
<script type=”text/javascript“>
tinyMCE.init({
// General options
mode : “exact”,
elements : “textarea1″ ,
TinyMCE ตัวหนังสือเล็กไปติ๊ดดดด..
หลังจากที่ดาวน์โหลดตัว TinyMCE และลองใช้งานดู จะรู้สึกว่าตัวอักษรที่แสดงในช่องป้อนข้อมูลเล็กไปหน่อย ( หรือเปล่า )
เอาเป็นว่า ไม่ถูกใจอยากเปลี่ยน ไปหาไฟล์นี้ให้เจอนะคับ แล้วเปิดมันขึ้นมา
|–tinymce_3_ob3
|—- tinymce
|—— themes
|——– advanced
|———- skins
|———— default
|————– content.css
TinyMCE กับความแปลกประหลาดเรื่อง ชื่อไฟล์
TinyMCE : version 3.0b3 beta
Editor : Adobe Dreamweaver CS3
วันหนึ่งหลังจากได้ดาวน์โหลด ตัว TinyMCE มาจากเว็บไซต์ และเริ่มทดสอบการใช้งาน แรกเริ่มเลย ก็ลองรันตัวอย่างของเขาดูก่อน
อ่าฮ้า … หน้าตาโอเค ทีนี้ก็เริ่มตั้งหน้าตั้งตาอ่านวิธีการใช้งาน จาก doc ที่เขาให้มาด้วย ก็พอเข้าใจนิดหน่อยแล้วล่ะ ได้ฤกษ์ทดลองเขียน
เปิด dream มา โช๊ะ สร้างไฟล์ใหม่ โช๊ะ ใส่ textarea โช๊ะ ก้อปโค้ดจากตัวอย่างเขามา โช๊ะ จะได้ไม่ต้องเขียนเอง โช๊ะ save ไฟล์
โช๊ะ เอาชื่อที่ dream ให้มานี่แหละ Untitled-1.php กด F12 รัน โช๊ะ นั่งรอและยิ้มมุมปาก
Error เพล้งงงงงง…..
ภาคขยายความ การใช้งาน TinyMCE
จากบทความก่อนหน้านี้ ผมได้เสนอบทความการใช้งาน TinyMCE จะมีโค้ดส่วนหนึ่งที่ใช้เริ่มต้น การทำงาน TinyMCE
วันนี้มาดูกันว่า ความหมายของ config แต่ละตัวนั้น หมายถึงอะไร และเป็นอะไรได้บ้าง
การติดตั้งและใช้งาน TinyMCE WYSIWYG
การติดตั้งและใช้งาน TinyMCE WYSIWYG
TinyMCE สคริปต์ที่จะทำให้ช่องเขียนข้อความ (<textarea>) ของเรา แปลงร่างไปคล้ายๆ ms word
ท่านสามารถดาวน์โหลดฟรีได้ที่
http://tinymce.moxiecode.com/download.php
โหลดมาแล้วก็แตกซิปซะนะครับ
มาถึงขั้นตอนเริ่มการใช้งาน
ผมสมมติว่าท่านกำลังทำหน้าเพจ เพจหนึ่ง มี <textarea> 1 ตัว ชื่อ textarea1
<textarea id="textarea1" cols="45" rows="5" name="textarea1"></textarea>
และต้องการนำ TinyMCE ไปใช้กับ textarea ตัวนี้
ก่อนอื่นท่านต้อง include ไฟล์ javascript TinyMCE หลักเข้ามา
<script src="tinymce_3_0b3/tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
และ config ต่อเลย
<script type="text/javascript"> tinyMCE.init({ // General options mode : "exact", elements : "textarea1" , theme : "advanced" , plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell, inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality, fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", // Theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist, numlist,|,outdent,indent,blockquote,|, undo,redo,|,link,unlink,anchor,image,cleanup,code,|, preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap, emotions,iespell,media,advhr,|,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|, cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true }); </script>
โค้ดทั้งหมดจะเป็นดังนี้
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <!-- TinyMCE --> <script type="text/javascript" src="tinymce_3_0b3/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // General options mode : "exact", elements : "textarea1" , theme : "advanced" , plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell, inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality, fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", // Theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist, numlist,|,outdent,indent,blockquote,|, undo,redo,|,link,unlink,anchor,image,cleanup,code,|, preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap, emotions,iespell,media,advhr,|,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|, cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true }); </script> <!-- /TinyMCE --> </head> <body> <form id="form1" name="form1" method="post" action=""> <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea> </form> </body> </html>
