contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Cara Memasang WYSIWYG bootstrap WYSIHTML5

Posted in Tutorial Bootstrap Life at 14 Desember 2017 With 0 Comments

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.

▼ Download Source Code Dibawah Ini ▼


Artikel ini akan menjelaskan cara memasang editor WYSIWYG bootstrap WYSIHTM5 :

wysiwyg wysihtm5 bootstrap

<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

Artikel Rekomendasi



Artikel Terkait

Diskusi