WYSIWYG WEB EDITOR :TinyMCE
TinyMCE merupakan salah WYSIWYG WEB EDITOR yang berbasis Javascript. Dengan library ini, akan memudahkan developer web dalam mengimplementasikan WYSIWYG WEB EDITOR.
Dalam percobaan berikut, kita akan mengimplementasikan WYSIWYG WEB EDITOR seperti gambar berikut :
 |
| Gambar.1 Ouput Editor Percobaan |
Setelah mendownlod librari TinyMCE, extractlah file tersebut ke dalam folder projek anda. Dalam percobaan ini, folder projek diberinama editor. Langkah ke-2 kita akan membuat tampilan layout terlebih dahulu dengan CSS yang diberi nama style.css
root { display: block; } h1 { color: #064A7A; font-size: 34px; font-weight: bold; margin:28px 0 8px; padding: 0; } /*Membuat bentuk dari kotak1 samapai kotak 7*/ #wrapper{ width:1000px;/*Lebar kotak*/ height:680px;/*Tinggi kotak*/ border:1px solid #cdcdcd; /*Border kotak*/ background:#f0f3f6;/*Background/warna kotak*/ margin:auto;/*Supaya kotak berada di tengah*/ } #header{ width:960px; height:150px; border:1px solid #cdcdcd; background:#639fce; margin:auto; margin-top:5px;/*jarak kotak dengan kotak diatasnya di beri 5px*/ } #wrapper_konten{ width:960px; height:500px; border:1px solid #cdcdcd; background:#639fce; margin:auto; margin-top:5px; } #left_konten{ width:240px; height:485px; border:1px solid #cdcdcd; background:#e6e2e2; float:left;/*Supaya kotak berada di pinggir kiri*/ margin-left:5px; margin-top:5px; } #right_konten{ width:700px; height:485px; border:1px solid #cdcdcd; background:#e6e2e2; float:left; margin-left:5px; margin-top:5px; margin-right:5px; }
<html> <head> <title>Contoh TinyMCE</title> <link type="text/css" rel="stylesheet" href="style.css"/> <script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", theme: "modern", plugins: [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table contextmenu directionality", "emoticons template paste textcolor colorpicker textpattern" ], toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft
aligncenter alignright alignjustify | bullist
numlist outdent indent | link image", toolbar2: "print preview media | forecolor backcolor emoticons", image_advtab: true, templates: [ {title: 'Test template 1', content: 'Test 1'}, {title: 'Test template 2', content: 'Test 2'} ] }); </script> </head> <body> <div id="wrapper"><!-- Membuat Kotak 1--> <div id="header"> <h1 align="center">Contoh Implementasi Seperti Microsoft Word <br>Dengan Plugin TinyMCE </h1> </div> <div id="wrapper_konten"> <div id="left_konten"> </div> <div id="right_konten"> <form name=form method="post"> <textarea name="content" style="height:351px"> </textarea> </form </div> </div> </div> </body> </html>
Jalankkan file test.html, maka outputnya akan tampil seperti Gambar.1. Anda dapat mendownload scriptnya beserta librarinya DISINI.
