Home > PHP 5, Umum > Editor WYSIYWG

Editor WYSIYWG

WYISWYG adalah singkatan dari What You See Is What You Get, dalam bahasa Indonesia artinya “Apa yang kamu lihat itu yang kamu dapat”. Istilah ini sering dikaitkan juga dengan editor teks dalam web site. Apabila kita memiliki editor teks yang sudah bersifat WYSIWYG maka kita tidak perlu repot untuk memformat tampilan teks yang akan keluar. Semuanya dapat kita lakukan dengan bantuan GUI dan dengan melakukan klik mouse, ya benar hanya dengan melakukan klik mouse kita dapat memformat tampilan teks kita sesuka hati. Bandingkan jika kita harus menginput teks menggunakan text field atau text area biasa, tentunya kita tidak dapat melakukan pemformatan apaapun toh.

Editor WYSIWYG untuk web site ada beberapa macam, yang paling terkenal adalah tinymce. Selain gratis, editor ini juga memiliki beberapa plugin bawaan yang sangat berguna. Apa bila kita mau mengeluarkan uang lebih, kita dapat membeli plugin berbayar untuk melakukan insert gambar.

Lalu bagaimana kita menggunakan tinymce ini? Pertama tentulah kita harus mendownload tinymce dari situs reminya atau dari tempat lain. Setelah didownload extract ke dalam direktori kerja web kita. Folder hasil extract terdiri atas dua folder yaitu examples dan jscripts serta satu buah file changelog.txt. Yang kita gunakan adalah isi dalam folder jscripts.

Pertama kita buat terlebih dahulu file .php untuk menampilkan editor yang menngunakan tinymce. Saya memberikan nama file ini simple.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”,

// Theme options
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,

// 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=”doSimple.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>

Fokus perhatian kita adalah pada penggunaan 2 sintaks javascript.

<script type=”text/javascript” src=”tinymce/jscripts/tiny_mce/tiny_mce.js”></script>

Perhatikan pada bagian src, di sini kita isikan dengan lokasi tempat tinymce tadi diekstract. Saya meletakkan folder tersebut dalam folder yang menyimpan file simple.php

Kemudian di sintaks javascript berikutnya dilakukan initialisasi tinymce yang akan digunakan:

  • elements : -> mendefinsikan element html yang dipakai untuk mengembed tinymce
  • plugins : -> mendefinisikan plugin apa saja yang kita pakai

<tr><td><textarea name=”isi” cols=”30″ rows=”10″ id=’elm2′></textarea></td></tr>

Atribut id pada textarea diisi sama dengan nilai elements dalam initialisasi di atas.

Untuk menampilkan hasilnya buat 1 file .php lagi, kita beri nama doSimple.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>

Source code di atas 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

About these ads
  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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: