, Menggunakan Editor Summernote

Menggunakan Editor Summernote

Posted on
haihaii, selamat siang. Assalamualaikum.

sudah lama tidak aktif ngepos di blog dikarenakan jam intensif belajar saya naik sehingga lupa dengan kewajiban sebagai seorang blogger . hehehe

ok guys kali ini saya akan membagikan sedikit cara dan apa ya.... memberi tahu aja lah ya mungkin cocoknya, tentang apa itu summernote dan bagaimana cara menggunakannya.

Summernote, yaitu WYSIWYG Editor di Bootstrap yang sangat super simple. sebelumnya, apa itu WYSIWYG? yang saya dapatkand dari Wikipedia adalah singkatan dari What You See Is What You Get . jadi mungkin yang dimaksud yaitu apa yang kita ketik di editor tersebut akan menampilkan hal yang serupa. Istilah singkatnya editor website. jadi itulah atau apalah. langsung saja ke pembahasan inti, bagaimana cara menggunakan summernote.

Pertama ini opsional, teman-teman menginginkan file css atau javascriptnya secara langsung dari folder lokal kita atau mengambil dari server yang sudah disediakan.
Jika teman teman memilih mendownloadnya maka teman-teman silahkan download disini.
Nah, jika sudah terdownload maka letakkan folder tersebut di folder lokal website.
Untuk menggunakan summernote ini, yang perlu diperhatikan pertama adalah memastikan kita menggunakan tipe HTML5, dengan menambahkan <!DOCTYPE html> di awal kita jumpa baris kode kita.

 <!DOCTYPE html><html lang=”en”>....</html>

Kemudian memanggil script css dan javascript kita di dalam elemen <head>
<head> <meta charset="UTF-8">  <title>Summernote</title>  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>   <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script> </head>
Ganti tulisan warna merah tersebut dengan path dimana file yang teman-teman tadi taruh. Dan jika teman-teman menggunakan server yang sudah disediakan, maka itu tidak perlu diganti.
Setelah itu untuk memanggil summernotenya, kita menggunakan id summernote maka jika kita menggunakan form <input> , ubah menjadi
<input type=”textarea” id=”summernote”>
Kita menggunakan id=”summernote” diatas karena itu digunakan untuk memanggil summernote.
Setelah itu tambahkan
<script>    $(document).ready(function() {        $('#summernote').summernote();    });  </script>
Agar summernote dapat difungsikan dengan baik. Maka hasil yang akan kita peroleh nantinya adalah

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Summernote</title>  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>   <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script></head><body>  <div id="summernote"><p>Hello Summernote</p></div>  <script>    $(document).ready(function() {        $('#summernote').summernote();    });  </script></body></html>

Sekian postingan saya kali ini, semoga bermanfaat. Bila ada yang kurang mohon kontak admin di laman Contact me. Terima kasih telah membaca. Selamat siang !

Wassalamualaikum Wr. Wb.

1 comment:

Subscribe to: Post Comments (Atom)