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

Editor dengan Syntax Highlighter II

Tutorial ini sama seperti tutorial sebelumnya hanya saja plugin yang digunakan berbeda. 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 icode.

Kemudian saya buat file .php untuk menampilkan editor tersebut, saya beri nama tinywithshldua.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,f
ullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,icode”,

// Theme options
theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,
justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,icode”,
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,

relative_urls : false,
remove_script_host : true,
document_base_url : “”,

// 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 –>

<!– Custom JS –>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/shCore.js” type=”text/javascript”></script>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/shBrushBash.js” type=”text/javascript”></script>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/shBrushAS3.js” type=”text/javascript”></script>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/shBrushCSharp.js” type=”text/javascript”></script>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/shBrushCss.js” type=”text/javascript”></script>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/shBrushJScript.js” type=”text/javascript”></script>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/shBrushSql.js” type=”text/javascript”></script>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/shBrushVb.js” type=”text/javascript”></script>
<script src=”tinymce/jscripts/tinymce/plugins/icode/javascript/shBrushXml.js” type=”text/javascript”></script>
<link href=”tinymce/jscripts/tinymce/plugins/icode/css/shCore.css” rel=”stylesheet” type=”text/css” />
<link href=”tinymce/jscripts/tinymce/plugins/icode/css/shThemeDefault.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript”>
SyntaxHighlighter.config.clipboardSwf = ‘javascript/clipboard.swf’;
SyntaxHighlighter.all();
</script>
<!– /Custom JS –>

</head>
<body>
<form action=”doTinyWithSHLDua.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 icode (sesuai dengan nama folder di folder plugins)
  • theme_advanced_buttons1 : -> tambahkan dengan icode (sesuai dengan nama folder di folder plugins)
  • relative_urls : false, -> tambahkan jika belum ada
  • remove_script_host : true, -> tambahkan jika belum ada
  • document_base_url : “”, -> tambahkan jika belum ada

Selain itu juga ditambahkan Custom JS (file jquery tidak terdapat dalam hasil downloatan).

Kekurangan plugin ini adalah suport bahasa pemrograman yang lebih sedikit dibandingkan dengan plugin yang digunakan pada tutorial sebelumnya.

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 doTinyWithSHLDua.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>

Untuk source code dapat di 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: