Text editor banyak kita jumpai hampir disetiap aplikasi berbasis web, seperti cms wordpress, ataupun blogger. Apa itu text editor? text editor adalah bagian dari sebuah form input yang digunakan untuk menerima input berupa text dengan fungsi tambahan, fungsi tambahan yang dimaksud adalah fungsi seperti merubah style huruf, insert gambar, style paragraf dll. Gambarannya input yang mirip di MS Word, input buat posting di blog,cms atau aplikasi berbasis web. Pada postingan kali ini, akan dijelaskan bagaimana menintegrasikan text editor yang berbasis bootstrap yaitu Bootstrap-wysihtml5 yang bisa didownload di http://jhollingworth.github.io/bootstrap-wysihtml5/ setelah filenya didownload kemudian diektrak dan dipaste di folder yang sama dengan file aplikasi anda, misal di htdocs/.... setelah itu buat file index.php dengan kode script seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Admin</title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport"/>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/bootstraptext.css" rel="stylesheet">
<link href="../css/styleku.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../src/bootstrap-wysihtml5.css"></link>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30181385-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<?php
//include menu navbar
include '../navbar/navbar.php';
?>
</head>
<body>
<div class="container">
<div style="height:50px;"></div>
<div class="hero-unit" style="margin-top:40px">
<h1 style="font-size:58px">bootstrap-wysihtml5 <small>Simple, elegan text editor</small></h1>
<hr/>
<!--Kode Text Editor dimana menggunakan class='textarea'-->
<textarea class="textarea" placeholder="Enter text ..." style="width: 810px; height: 200px"></textarea>
</div>
</div>
</body>
<!--Include all file dipendensinya, sesuaikan dengan folder agan,
Bagian ini perlu diperhatikan harus benar, jika tidak texteditornya tidak akan bisa tampil sempurna
-->
<script src="../js/wysihtml5-0.3.0.js"></script>
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/prettify.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../src/bootstrap-wysihtml5.js"></script>
<!--Baris kode javascript untuk menset semua class dengan nama textarea akan menggunakan stye text editor-->
<script>
$('.textarea').wysihtml5();
</script>
<script type="text/javascript" charset="utf-8">
$(prettyPrint);
</script>
</html>
Jika Agan menulis scriptnya dengan benar, hasil akhirnya akan tampak seperti gambar dibawah in.
0 komentar