การติดตั้งและใช้งาน 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>

General image media preview
Avatar

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

Programmer, Blogger

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