WYSIWYG WEB EDITOR:CKEDITOR
Sama seperti contoh sebelumnya, kita akan mencoba implementasi librari CKEditor sehingga hasil akhir akan kelihatan seperti gambar berikut :
 |
| Gambar.1 Output Textarea Editor dengan librari CKEditor |
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; }
File yang kedua adalah file html yang menampilkan hasil dari layout dan pemanggilan librari CKEditor. Dalam projek ini, kita berinama file tersebut coba.html yang berisikan source code sebagai berikut :
<html> <head> <title>Plugin CKEDITOR</title> <link type="text/css" rel="stylesheet" href="style.css"/> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> </head> <body> <div id="wrapper"> <div id="header"> <h1 align="center">Contoh Implementasi Seperti Microsoft Word <br>Dengan Plugin CKEditor </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> <script type="text/javascript"> var editor = CKEDITOR.replace("content", { filebrowserBrowseUrl : '', filebrowserWindowWidth : 1000, filebrowserWindowHeight : 500 }); </script> </body> </html>
Sehingga, output terakhirnya akan muncul seperti Gambar.1 diatas. Untuk mendownlod scriptnya (file style.css dan coba.html) beserta librari CKEditor, Klik DISINI.
