ภาพประกอบไม่เกี่ยวกับบทความ

จากบทความก่อนหน้านี้ ผมได้เสนอบทความการใช้งาน 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 simple mode

*** ตัว TinyMCE ยังมี config ให้ปรับแต่ง ให้เล่น กันอีกเพียบ ลองอ่านดูนะ
http://wiki.moxiecode.com/index.php/TinyMCE:Index

ส่วนตัวผม กว่าจะแปล กว่าจะอ่าน มาเขียนได้นิดหน่อย กระอักเลือดไปหลายกระโถน ด้วยความที่กำลังภายในภาษาปะกิด มีหรอมแหรม
วันนี้คงขอตัวแค่นี้ก่อนละครับ ไปขึ้นโรงเตี๊ยม กินแหนม+ข้าวเหนียว เพิ่มเติมพลังวัตร

ผู้น้อยขอตัว

General image media preview TinyMCE wysiwyg
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ