Memasang Text Editor Summernote WYSIHTML5 dengan Mudah

Memasang Text Editor Summernote WYSIHTML5 pada PHP dengan Mudah – Hai sobat ketemu lagi dengan saya dewan komputer, setelah sebelumnya saya sudah membahas tentang cara menggunakan text editor tinymce dan cara menggunakan text editor CKEditor. Pada postingan kali ini saya akan membahas tentang cara membuat text editor menggunakan Summernote. Fitur dari summernote ini menurut saya sudah cukup, tidak terlalu banyak jadi tidak membingungkan pengguna, ringan dan pastinya cara pemasangannya pun sangat mudah.

Sebenarnya penggunaan Summernote ini tidak hanya ada pada PHP karena sebenarnya basicnya adalah HTML dan javascript jadi kita bisa menggunakannya pada Framework PHP seperti Laravel, Codeigniter, Yii, dan masih banyak lagi selain itu juga bisa di Java Spring/Spring boot maupun .Net selama masih support HTML dan Javascript.

Cara Memasang Summernote

Untuk penggunaannya sangat mudah yaitu tentunya sobat download di website Summernote atau sobat bisa download bersama dengan project ini di akhir postingan. Untuk memasangnya cukup masukkan librari dari Summernote ke dalam tag <head> dengan menambahkan baris dibawah ini

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/font-awesome.min.css"> 
<link href="summernote/summernote.css" rel="stylesheet">

Dan menambahkan librari javascript pada tag <body> paling bawah seperti berikut

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="summernote/summernote.min.js"></script>

Jika sobat belum mempunyai librari bootstrap, fontawesome dan jquery, sobat bisa download di website resminya atau download bersama project ini di akhir postingan. Jika sobat tidak menambahkan librari diatas semuanya maka akan menyebabkan summernote tidak tampil dengan semestinya. Untuk pembuatannya sangat mudah yaitu tentunya sobat harus membuat dulu textarea yang ingin digabungkan dengan summernote seperti contoh berikut

<textarea id="content" name="content" rows="10"></textarea>

kemudian sobat buat tag <script> pada tag <body> paling bawah dan isikan dengan script berikut

<script type="text/javascript">
  $(document).ready(function() {
    $('#content').summernote({
      height: "300px",
      styleWithSpan: false
    });
  }); 
</script>

Pada kode javascript diatas akan mengubah textarea dengan id=’content’ dengan summernote. Cara ini mudah digunakan dan pastinya tidak akan mengubah semua textarea menjadi summernote melainkan hanya id tertentu saja.

Multiple Summernote

Untuk membuat multiple summernote, bisa sobat buat dengan cara dibawah ini

<textarea id="content1" name="content1" rows="10"></textarea>
<textarea id="content2" name="content2" rows="10"></textarea>

Pada javascriptnya sobat buat seperti ini

<script type="text/javascript">
  $(document).ready(function() {
    $('#content1').summernote({
      height: "300px",
      styleWithSpan: false
    });
    $('#content2').summernote({
      height: "300px",
      styleWithSpan: false
    });
  }); 
</script>

Hasilnya adalah sebagai berikut :

Dengan penggunaan yang sangat mudah tentunya banyak yang tambah suka untuk menggunakan plugin ini. Untuk lihat fitur-fiturnya bisa sobat lihat pada demo. Sekian postingan saya tentang Memasang Text Editor Summernote WYSIHTML5 dengan Mudah. Jika ada pertanyaan silahkan tinggalkan komentar pada kolom komentar dibawah dan sampai jumpa pada postingan saya selanjutnya.

Cara Membuat Text Editor WYSIHTML5 pada PHP dengan TinyMCE

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..