WYSIWYG html editor adalah sebuah teks/konten editor yang biasanya
ada pada sebuah website dinamis, biasanya wysiwyg html editor ini berada
di halaman administrator, wysiwyg html editor memiliki fitur yang mirip
dengan microsoft word, dimana kita bisa membuat teks yang miring,
tebal, garis bawah, mengatur paragraph, membuat bullet & numbering,
dan lainnya yang berguna untuk mengelola konten website.
Wysiwyg html editor yang paling terkenal yaitu TinyMCE (bahkan dignakan oleh wordpress), Berikut ini ada beberapa wysiwyg editor gratis lain yang bisa anda gunakan untuk website anda.
1. Simplified WYSIWYG Editor (Bootstrap): Summernote
 | |
 |
| Website : http://benweet.github.io/stackedit/ Download : https://github.com/benweet/stackedit/ |
3. A Lovely JavaScript WYSIWYG Editor – Redactor
 |
| Website : http://redactorjs.com/ Download : http://redactorjs.com/examples/ |
 |
| Website : http://xing.github.com/wysihtml5/ Download : https://github.com/xing/wysihtml5 |
5. HTML5-Powered WYSIWYG Editor: Mercury
 |
| Website : http://jejacks0n.github.com/mercury/ Download : https://github.com/jejacks0n/mercury |
6. WYSIWYG Editor With A File Manager: elRTE
 |
| Website : http://elrte.org/ Download : http://elrte.org/demo |
 |
| Website : http://premiumsoftware.net/cleditor/ |
Ane bahas yang Summernote gan ye, setelah dibuat gak bisa tidur untuk nentuin Editor mana yang mau dipakai dan kesesuaian integrasi dengan menggunakan Bootstrap 3.2.x dan CodeIgniter 2.4.x.
Dokumentasi dari summernote sendiri sudah cukup lengkap jika inginn belajar dari nol pun gak ada masalah. yang paling ane suka tu gambar langsung bisa di tambahkan secara langsung dalam editor, tanpa harus setting sana sini.
Download dulu dari sumbernya langsung
Website : http://hackerwins.github.io/summernote/Asumsi Themes yang digunakan agan semua minimal yang sudah support dengan Bootstrap 3.x dan membutuhkan jQuery yang terakhir.
Download : https://github.com/HackerWins/summernote/
Hal yang perlu disiapkan:
1. Instalasi css & js paket summernote
Extract dan tambahkan dittempat biasa agan semua naruh js dan css, tiap orang punya style sendiri. Kalo ane cenderung dipisahkan antara css dan js jadi kalo nyari gampang. Library pada paket summernote ada summernote.css dan summernote.min.js
2.Pemanggilan form summernote
yang akan dieksekusi di pengalaman ane sih jQuery harus ditempatin paling atas soalnya dipake summernote untuk operasi fungsi yang ada dalam summernote.
kedua script utama yang harus ditambahkan dalam pemanggilan.Buat manggil summernote, dengan mengacu pada class textarea atau ID atau nama textarea yang digunakan.
$(function() {
$('.summernote').summernote({
height: 400
});
$('form').on('submit', function (e) {
var myValueEditor = $('.summernote').code();
//alert(myValueEditor);
//if(myValueEditor='') {alert('Konten masih kosong');}
document.getElementById('myEditorId').value = myValueEditor;
// document.getElementById('myForm');
});
});
3.Parsing data form summernote dan validasi di Codeigniter
yang parsingnya menggunakan hidden variabel yang dalam memasukan valuenya dengan menggunakan perintah javascript dengan mengacu pada id document pada form yang dibuat.
4. Tampilkan hasil dalaman halaman
htmlspecialchars($str);
