Pusat Ilmu Secara Detil

WYSIWYG WEB EDITOR :TinyMCE

WYSIWYG WEB EDITOR :TinyMCE

Pernahkan anda melihat textarea yang lengkap dengan fitur-fitur seperti Microsoft Word pada sebuah web. Hal ini disebut dengan WYSIWYG WEB EDITOR.

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; 
}

Kemudian, buatlah file yang kita beri nama test.html, dimana dalam file ini kita akan memanggil librari TinyMCE dan dilekatkan dalam textarea seperti coding berikut :

<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.

Share this:

You Might Also Like:

Disqus Comments