Home > PHP 5, Umum > Editor dengan Syntax Highlighter I

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.

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: