WYSIWYG WEB EDITOR:Membuat Editor Artikel Berita
Sama seperti tutorial sebelumnya tentang wysiwyg web editor, kita juga akan menggunakan bantuan librari javascript. Library yang digunakan adalah NicEdit.
Untuk percobaan, terlebih dahulu buatlah file css yang diberi nama style.css yang berisikan script sebagai berikut:
root {
display: block;
}
#wrapper{
width:1000px;/*Lebar kotak*/
height:680px;/*Tinggi kotak*/
border:1px solid #cdcdcd; /*Border kotak*/
background:#f0f3f6;/*Background/warna kotak*/
margin:auto;
}
#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;
}
textarea{
background-color: orangered;
border: 2px solid #549c00;
border-radius: 30px;
width: 100%;
height: 80%;
}
h4{
color:tomato;
font-family:Georgia,serif;
font-size: 24px;
font-variant: small-caps; text-transform: none; margin-bottom: 0;
}
Langkah kedua, buatlah file yang diberi nama test.html yang berisikan script sebagai berikut:
<html> <head> <title>Contoh NicEdit</title> <link type="text/css" rel="stylesheet" href="style.css"/> <script type="text/javascript" src="../nicEdit.js"></script> <script type="text/javascript"> //<![CDATA[ bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); //]]> </script> </head> <body> <div id="wrapper"> <div id="header"> <h1 align="center">Contoh Implementasi Seperti Microsoft Word <br>Dengan Plugin NicEdit </h1> </div> <div id="wrapper_konten"> <div id="left_konten"> </div> <div class="right_konten"> <h4> Posting Artikel </h4> <textarea name="content"> Some Initial Content was in this textarea </textarea> </div> </div> </div> </body> </html>
Output dari program tersebut :
Untuk mendownload source code, klik DISINI.
