Pada artikel kali ini admin akan share Cara Memasang Wysiwyg pada Bootstrap.. Bootstrap sendiri sudah menyediakan text editor website yaiut WYSIHTML5 , editor ini dapat anda gunakan langsung jika anda menggunakan template bootstrap.

Template bootstrap pada masa sekarang ini memang sangat banyak digunakan oleh kalangan developer.. fitur yang lengkap yang tentunya akan memudahkan dan mempercepat dalam pembuatan aplikasi yang diinginkan.

Artikel ini akan menjelaskan cara memasang editor WYSIWYG bootstrap WYSIHTM5 :

<link rel="stylesheet" type="text/css" href="/css/bootstrap-wysihtml5.css"></link>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"></link>
<script src="js/wysihtml5-0.3.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-wysihtml5.js"></script>

Penggunaannya Cukup mudah :

<textarea id="textarea" placeholder="Enter text ..."></textarea>
<script type="text/javascript">
    $('#textarea').wysihtml5();
</script>

Untuk custom button yang ingin kita tampilkan kita bisa menggunakan script dibawah ini :

$('#textarea').wysihtml5({
    "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
    "emphasis": true, //Italics, bold, etc. Default true
    "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
    "html": false, //Button which allows you to edit the generated HTML. Default false
    "link": true, //Button to insert a link. Default true
    "image": true, //Button to insert an image. Default true,
    "color": false //Button to change color of font  
});

Dari kode diatas.. kita bisa menampilkan button editor WYSIHTML5 sesuai dengan yang kita inginkan, true untuk menampilkan dan false untuk menyembunyikan button