การติดตั้งและใช้งาน 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> |
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
