WYSIWYG WEB EDITOR:Editor Berita Berbasis Web

Edisi WYSIWYG WEB EDITOR kali ini akan menggunakan librari SCEDitor yang lisensinya dibawah MIT.

Pada pembahasan sebelumnya, kita telah banyak menyinggung contoh pembuatan artikel berita seperti microsoft word seperti :

Untuk pembuatan WYSIWYG WEB EDITOR dengan SCEditor, pastikan anda telah mendownlod libarynya. Kemudian buatlah file css yang diberinama layout.css yang berisikan script css seperti berikut :

html, body {
  height: 100%;
}

body {
  padding: 10px;
  background: azure;
}

.header1{
 background-color:#534B4F;
 border: 2px solid #534B4F;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
}

.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 berikutnya, buatlah file yang bernama artikel.html yang berisikan source code sebagai berikut :

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

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

<!-- Include jQuery, this can be omitted if it's already included -->
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<!-- Include the default theme -->
<link rel="stylesheet" href="SCEditor/minified/themes/default.min.css"
type="text/css" media="all" />

<!-- Include the editors JS -->
<script type="text/javascript" src="SCEditor/minified/jquery.sceditor.bbcode.min.js">
</script>

<script>
$(function() {
    $("textarea").sceditor({
        plugins: "bbcode",
        style: "SCEditor/minified/jquery.sceditor.default.min.css"
    });
});
</script>
</head>
<body>

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

<div class="header"></div>
<div class="header2">
    <form name=form method="post">
        <textarea name="content" style="width:97%; height:50%">
        </textarea>
    </form>
</div>

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

Output dari program tersebut ditunjukkan oleh gambar dibawah ini :

Anda dapat mendownload source codenya, klik DISINI.

WYSIWYG WEB EDITOR:Editor Berita Berbasis Web

0 Response to "WYSIWYG WEB EDITOR:Editor Berita Berbasis Web"

Posting Komentar