HTML Text Area dengan TinyMCE

Sebelum mulai, lihat gambar ini

Saat membuat form menggunakan codecharge studio, default isi dari textarea  hanya teks. Kita tidak dapat mengisikan kode html.

Contoh berikut ini kita akan membuat textarea dalam form menjadi isian html. Pastinya akan lebih baik.

Codecharge studio versi 4 yang saya gunakan memiliki tool untuk membuat form seperti ini. Hanya saja editor yang digunakan adalah FCKeditor. CCS akan otomatis menambahkan script di halaman yang kita akan pasang textarea. Tetapi, kita tetap harus mendownload fckeditor dari webnya dan mengupload sendiri.



Berdasar pengalaman, saya lebih suka menggunakan tinyMCE (jangan tanya mengapa).

Membuat TextArea dengan tinyMCE

Menggunakan halaman addkisah yang telah ada form yang ada textareanya, ikuti langkah berikut.

Buka halaman menggunakan codecharge studio mode html.
Tambahkan di atas tag </HEAD>

<!-- TinyMCE -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
        tinyMCE.init({
                mode : "textareas",
                theme : "advanced",
                skin : "o2k7",
                plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",
                theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
                theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
                theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "bottom",
                theme_advanced_resizing : true,
                content_css : "css/word.css",
                template_external_list_url : "lists/template_list.js",
                external_link_list_url : "lists/link_list.js",
                external_image_list_url : "lists/image_list.js",
                media_external_list_url : "lists/media_list.js",
                template_replace_values : {

                }
        });
</script>
<!-- /TinyMCE -->

dan untuk textarea sbb

<textarea style="WIDTH: 500px; HEIGHT: 200px" 

 id="elm1" rows="11" cols="50" name="elm1">

</textarea>

Jangan lupa untuk mendownload tinyMCE dan menyimpannya di server.