จากบทความก่อนหน้านี้ ผมได้เสนอบทความการใช้งาน TinyMCE จะมีโค้ดส่วนหนึ่งที่ใช้เริ่มต้น การทำงาน TinyMCE
วันนี้มาดูกันว่า ความหมายของ 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> |
ความหมายและค่าที่เป็นไปได้
mode : สำหรับกำหนดวิธีในการเปลี่ยน textarea ไปเป็น TinyMCE WYSIWYG
- ค่าที่เป็นไปได้ 4 ค่า
- textareas : เปลี่ยน textarea ทุกตัวที่เจอในเพจ
- specific_textareas : เปลี่ยน textarea ทุกตัวที่มี attribute ที่กำหนดใน textarea_trigger ถูกเซ็ตเป็น true
specific_textareas ต้องใช้คู่กับ textarea_trigger<script type="text/javascript"> tinyMCE.init({ // General options mode : "specific_textareas", textarea_trigger : "convert_this" }); </script> <textarea name="textarea1" id="textarea1" cols="45" rows="5" convert_this="true"></textarea>
- exact : เปลี่ยน textarea ทุกตัวที่มี name ตรงกับที่ระบุใน elements ** แนะนำให้ใช้ โหมดนี้ ** exact ต้องใช้คู่กับ elements ถ้าต้องการใช้กับ textarea หลายตัวให้ใช้เครื่องหมาย คอมม่า คั่นชื่อใน elements
<script type="text/javascript"> tinyMCE.init({ // General options mode : "exact", elements : "textarea1,textarea2" }); </script> <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea> <textarea name="textarea2" id="textarea2" cols="45" rows="5"></textarea>
- none : ยังไม่ต้องเปลี่ยนแปลงอะไร ไว้จะเขียนโปรแกรมควบคุมการเปลี่ยนเอง
theme : สำหรับกำหนดหน้าตาของ TinyMCE WYSIWYG
- ค่าที่เป็นไปได้ 2 ค่า
- advanced : ระบุหน้าตาเอง ว่าจะแสดงหน้าตายังไง ประกอบด้วยปุ่มอะไรบ้าง
- simple : ตัว TinyMCE จะกำหนดหน้าตาให้เอง โดยจะเอาเฉพาะปุ่มที่จำเป็นๆ ไม่กี่ปุ่ม
*** เอาล่ะทีนี้ผมจะแสดงการใช้งานตัว TinyMCE แบบที่ง่ายที่ซู้ดดดด และโคตรสั้น
<script type="text/javascript"> tinyMCE.init({ // General options mode : "exact", elements : "textarea1", theme: "simple", }); </script> <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea> |
หน้าตาจะออกมาประมาณนี้
*** ตัว TinyMCE ยังมี config ให้ปรับแต่ง ให้เล่น กันอีกเพียบ ลองอ่านดูนะ
http://wiki.moxiecode.com/index.php/TinyMCE:Index
ส่วนตัวผม กว่าจะแปล กว่าจะอ่าน มาเขียนได้นิดหน่อย กระอักเลือดไปหลายกระโถน ด้วยความที่กำลังภายในภาษาปะกิด มีหรอมแหรม
วันนี้คงขอตัวแค่นี้ก่อนละครับ ไปขึ้นโรงเตี๊ยม กินแหนม+ข้าวเหนียว เพิ่มเติมพลังวัตร
ผู้น้อยขอตัว
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
