Pusat Ilmu Secara Detil

WYSIWYG WEB EDITOR:Editor Posting Artikel

WYSIWYG WEB EDITOR:Editor Posting Artikel

Library elRTE menjadi salah satu alternatif yang cukup populer dalam pembuatan WYSIWYG WEB EDITOR, dimana fitur-fitur yang tersedia menyerupai Microsoft Word. Tentunya hal ini sangat membantu para editor berita dalam memposting artikel pada situs berita online.

Seperti pernah disinggung sebelumnya pada tutorial WYSIWYG WEB EDITOR, anda juga dapat menggunakan librari lainnya seperti contoh pada edisi sebelumnya :


Untuk implementasi wysiwyg web editor dengan menggunakan elrTE, pastikan anda telah mendowloadnya terlebih dahulu. Langkah pertama kita akan membuat file css yang diberinama layout.css yang berisikan script sebagai berikut:

html, body {
  height: 100%;
}

body {
  padding: 10px;
  background: azure;

}

.logo{
    background-image: url(logo.jpg);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color:#0263ca;
    background-repeat: no-repeat;
    padding-top:20px;
    padding-bottom:100px;
}

.header1{
 background-color:#534B4F;
 border: 2px solid #534B4F;

}

.header {
  background-color: #EFDECD;
   padding-bottom:10px;
}
.header2 {
  background: #B2BEB5;
  
  padding-bottom:10px;
  padding-left:50px;
}

div {
  color: white;
  padding: 10px;
}

#footer {
    background-color:#534B4F;
    border: 2px solid #534B4F;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-bottom: 10px;
}
#footer .copyright {
    text-align: center;
}

Langkah kedua, buatlah file yang diberinama artikel.html yang berisikan source code sebagai berikut :

<html>
<head><title></title>

<link rel="stylesheet" type="type/css"  href="layout.css">

<!-- jQuery and jQuery UI -->
    <script src="elrte/js/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8">
    </script>
    <script src="elrte/js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"
    charset="utf-8">
    </script>
    <link rel="stylesheet" href="elrte/css/smoothness/jquery-ui-1.8.13.custom.css"
    type="text/css" media="screen" charset="utf-8">

    <!-- elRTE -->
    <script src="elrte/js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="elrte/css/elrte.min.css" type="text/css"
    media="screen" charset="utf-8">

    <!-- elRTE translation messages -->
    <script src="elrte/js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8">
    </script>

    <script type="text/javascript" charset="utf-8">
        $().ready(function() {
            var opts = {
                cssClass : 'el-rte',
                // lang     : 'ru',
                height   : 450,
                toolbar  : 'complete',
                cssfiles : ['elrte/css/elrte-inner.css']
            }
            $('#editor').elrte(opts);
        })
    </script>
</head>
<body>

<div class="logo"></div>
 <div class="header1">
   <h2 align="center">POSTING ARTIKEL USING SCEDITOR</h2>
</div>

<div class="header"></div>
<div class="header2">
    <div id="editor"></div>
</div>

<div id="footer">
    <div class="copyright">
        Copyright &copy; 2015 Pusat Ilmu Secara Detil
    </div>
</div>
</body>
</html>

Output dari program tersebut ditunjukkan gambar berikut :


Untuk mendownload source code tersebut, tinggal diextract dan ditempatkan pada folder httdoc. Download source code :

Share this:

You Might Also Like:

Disqus Comments