Pusat Ilmu Secara Detil

WYSIWYG WEB EDITOR:Membuat Editor Artikel Berita

WYSIWYG WEB EDITOR:Membuat Editor Artikel Berita

Pada pembahasan edisi sebelumnya yaitu:WYSIWYG WEB EDITOR:CKEditor dan TinyMCE, kita telah mencoba membuat editor web untuk memposting artikel yang fitur-fiturnya seperti menggunakan Microsoft Word.

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.

Share this:

You Might Also Like:

Disqus Comments