Editor dengan Syntax Highlighter I
Pada tutorial sebelumnya saya menjelaskan bagaimana kita menggunakan tinymce sebagai editor yang bersifat WYSWYG. Sekarang saya akan menjelaskan bagaimana caranya apabila kita ingin menginputkan teks berupa kode program. Biasanya kita menginginkan kode program memiliki format tampilan tersendiri. Untuk melakukannya kita membutuhkan plugin tinymce tambahan. Plugin ini dapat didownload di sini.
Cara penggunaanya cukup mudah. Extract file hasil download ke dalam direktori plugin tinymce. Saya merename folder hasil extract tersebut dengan nama syntaxhl.
Kemudian saya buat file .php untuk menampilkan editor tersebut, saya beri nama tinywithshl.php
<html>
<head>
<title>Contoh Pemakaian editor WYSIWYG tinymce</title><!– TinyMCE –>
<script type=”text/javascript” src=”tinymce/jscripts/tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
// General options
mode : “textareas”,
elements : “elm2”,
theme : “advanced”,
plugins : “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,wordcount,advlist,autosave,syntaxhl”,// Theme options
theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,
justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,syntaxhl”,
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,extended_valid_elements : “textarea[cols|rows|disabled|name|readonly|class]”,
// Example content CSS (should be your site CSS)
content_css : “css/content.css”,// Drop lists for link/image/media/template dialogs
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”,// Style formats
style_formats : [
{title : ‘Bold text’, inline : ‘b’},
{title : ‘Red text’, inline : ‘span’, styles : {color : ‘#ff0000’}},
{title : ‘Red header’, block : ‘h1’, styles : {color : ‘#ff0000’}},
{title : ‘Example 1’, inline : ‘span’, classes : ‘example1’},
{title : ‘Example 2’, inline : ‘span’, classes : ‘example2’},
{title : ‘Table styles’},
{title : ‘Table row 1’, selector : ‘tr’, classes : ‘tablerow1′}
],// Replace values for the template plugin
template_replace_values : {
username : “Some User”,
staffid : “991234”
}
});
</script>
<!– /TinyMCE –></head>
<body>
<form action=”doTinyWithSHL.php” method=”POST”>
<table>
<tr><td><textarea name=”isi” cols=”30″ rows=”10″ id=’elm2’></textarea></td></tr>
<tr><td><input type=”submit” value=”Sent”></td></tr>
</table>
</form>
</body>
</html>
Konfigurasi yang saya tambahkan adalah di bagian:
- plugins : -> tambahkan dengan syntaxhl (sesuai dengan nama folder di folder plugins)
- theme_advanced_buttons1 : -> tambahkan dengan syntaxhl (sesuai dengan nama folder di folder plugins)
- extended_valid_elements : “textarea[cols|rows|disabled|name|readonly|class]”, -> tambahkan jika belum ada
Cara penggunaannya cukup dengan melakukan klik pada tombol yang berada di sebelah kanan atas, masukan kode program dan pilih jenis programnya. Untuk menampilkan hasilnya buat 1 file .php lagi, kita beri nama doTinyWithSHL.php
<html>
<head>
<title>Ini hasil tampilan simple</title>
</head>
<body>
<table>
<tr><td><?php
$isi = $_POST[‘isi’];
echo $isi;
?></td></tr>
</table>
</body>
</html>
File source code dapat anda download di sini.
Aku
My Link
From Zero to Hero 