WYSIWYG WEB EDITOR:Editor Berita Berbasis Web
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; }
<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 © 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.
