Pusat Ilmu Secara Detil

WYSIWYG WEB EDITOR:CKEDITOR

WYSIWYG WEB EDITOR:CKEDITOR

Pada edisi sebelumnya, kita telah mengimplementasikan WYSIWYG WEB EDITOR dengan libari TinyMCE. Alternatif lain untuk mengimplementasikan WYSIWYG WEB EDITOR, kita dapat menggunakan CKEDITOR yang dapat anda download disini.

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
Dalam projek ini, terdapat dua file, file pertama merupakan pembentuk layout yang diberi nama style.css yang berisi script dibawah ini :

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.

Share this:

You Might Also Like:

Disqus Comments