ขั้นตอนการใช้งาน tinymce มีดังนี้
1. เรียกใช้งาน jquery และ tinymce
<!-- เรียกใช้งาน jquery -->
<script type="text/javascript" src="http://projectsoft.biz/js/jquery.js"></script>
<!-- เรียกใช้งาน tinymce -->
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
2. สร้าง Element Textarea
<textarea id="detail" name="detail" ></textarea>
3. พิมพ์คำสั่ง javascript เพื่อ สร้าง toolbar ให้ textarea
<script>
//สร้าง text editor
tinymce.init({
selector:'#detail ',//id ของ textarea ที่ต้องการสร้าง
height : 300,//กำหนดความสูงของ textarea
menubar: false,//ไม่แสดงเมนู
plugins: ["textcolor"],//ใช้ plugin ให้เปลี่ยนสีตัวอักษรได้
toolbar: ["undo redo | bold italic underline | styleselect | forecolor | alignleft aligncenter alignright | bullist,numlist"],//กำหนดปุ่มใน toolbar
style_formats: [//กำหนดขนาดอักษร
{title: '11px', inline: 'span', styles: { fontSize: '11'}},
{title: '12px', inline: 'span', styles: { fontSize: '12'}},
{title: '14px', inline: 'span', styles: { fontSize: '14'}},
{title: '16px', inline: 'span', styles: { fontSize: '16'}},
{title: '18px', inline: 'span', styles: { fontSize: '18'}},
{title: '20px', inline: 'span', styles: { fontSize: '20'}},
{title: '22px', inline: 'span', styles: { fontSize: '22'}},
{title: '24px', inline: 'span', styles: { fontSize: '24'}}
],
});
</script>
และผลลัพธ์ที่ได้คือ
