Cara membuat text editor CKEditor WYSIHTML5 pada PHP dengan Mudah dan Gratis – Hai sobat blogger ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang cara membuat/menggunakan/memasang CKEditor menggunakan PHP. CKeditor merupakan plugin yang sering dipakai oleh developer khususnya web dalam membuat Text Editor seperti sobat menulis dalam Microsoft Word atau saat sobat memposting dalam blog.
CKEditor sendiri mempunyai 3 varian yaitu basic, standar dan full. Tentunya kita sendiri yang menentukan ingin menggunakan yang mana karena tidak semua fitur kita butuhkan dalam aplikasi kita. Jadi tidak mesti kita menggunakan yang full karena itu nantinya akan membingungkan user atau malah akan merusak tampilan karena sebetulnya kita tidak butuh dan ada user yang iseng menggunakan fitur yang tidak suport dengan aplikasi kita. Selain fiturnya yang lengkap, penggunaannya pun sangat mudah. Sobat hanya perlu download pluginnya pada website resminya disini. Untuk versinya sendiri sekarang yang paling sering digunakan ada versi 4 dan versi terbaru saat ini adalah versi 5. Sobat bisa memilihnya sesuai keinginan sobat. Untuk menyamakan dengan tutorial pada postingan ini sobat bisa download project di akhir postingan.
Sebenarnya penggunaan CKEditor 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 dan Macam-macam Jenis CKEditor
Untuk penggunaannya sangat mudah yaitu tentunya sobat download di website CKEditor sesuai dengan package yang sobat inginkan, kemudian ekstrak dan masukkan folder project sobat. Untuk memasangnya cukup masukkan librari javascript dari CKEditor ke dalam tag <body> paling bawah dengan menambahkan baris dibawah ini
<script src="ckeditor/ckeditor.js"></script>
Berikut adalah beberapa variannya. Jika sobat ingin menambahkan upload gambar dan simpel maka sobat perlu centang Easy Image. seperti pada demo dibawah nanti pada contoh yang menggunakan Standar Package saya menggunakan Easy Image sedangkan yang full saya menggunakan tanpa easy image.
Untuk penggunaannya sangat mudah yaitu cukup menambahkan class=”ckeditor” dan id=”bebas” seperti pada contoh dibawah
<textarea class="ckeditor" id="ckeditor" name="ckeditor"></textarea> <textarea class="ckeditor" id="ckeditor2" name="ckeditor2"></textarea> <textarea class="ckeditor" id="ckeditor3" name="ckeditor3"></textarea>
dengan begitu akan menjadi seperti gambar dibawah
Pada contoh diatas adalah package Basic. Untuk package Standar dan Full, cara penggunaanya sama namun hanya package yang sobat download dan masukkan javascriptnya saja yang berbeda. Jika sobat menggunakan package yang standar maka akan jadi seperti ini
Lebih banyak bukan? Karena saya mendownload menggunakan Easy Image maka saat klik Image langsung muncul dialog box untuk pilih gambar dan jika klik upload maka secara otomatis gambar akan masuk ke dalam CKEditor.
Pada contoh dibawah adalah jika kita mendownload package dengan full package
Custom CKEditor
Setelah kita membuat ckeditor secara default, selanjutnya kita membuatnya secara custom. Dengan custom CKEditor ini kita bebas untuk menambahkan atau menghapus menu atau toolbar yang kita inginkan. Untuk package saya coba contohkan dari package full. pada textarea sama yaitu contoh seperti dibawah
<textarea class="ckeditor" name="editor-custom" id="editor-custom"></textarea>
Selanjutnya kita buat tag <script> di paling bawah dan tambahkan code berikut untuk mengganti warna
<script type="text/javascript">
CKEDITOR.replace('editor-custom', {
uiColor: '#00FF00'
});
</script>
pada bagian dibawah merupakan id dari textarea, pada contoh saya tuliskan id=”editor-custom” dan sobat bisa ganti dengan apa saja apalagi jika dalam satu halaman terdapat dua atau lebih editor maka sobat bisa menggantinya berbeda-beda setiap editor
CKEDITOR.replace('editor-custom', {
Untuk mengganti bahasa sobat bisa tambahkan baris language: ‘id’ sehingga tampilan script akan menjadi seperti dibawah
<script type="text/javascript">
CKEDITOR.replace('editor-custom', {
uiColor: '#00FF00',
language: 'id'
});
</script>
Selain itu sobat juga bisa mengganti panjang atau lebar dari CKEditornya yaitu dengan menambahkan kode
width: '100%', height: 250,
Untuk menambahkan atau mengurangi menunya secara custom pada CKEditornya maka sobat bisa pilih pada kode dibawah. Secara default toolbar: adalah null dan itu akan menampilkan semua menu dan contoh dibawah adalah menampilkan semua menu tapi bukan secara default dan sobat bisa hapus saja yang tidak perlu.
toolbar: [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] },
],
Sehingga secara keseluruhan tag <script> yang telah kita buat menjadi seperti dibawah
<script type="text/javascript">
CKEDITOR.replace('editor-custom', {
uiColor: '#00FF00',
language: 'id', // id, es, en, dll
width: '100%',
height: 250,
toolbar: [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] },
]
});
</script>
Hasilnya adalah sebagai berikut :
Bagaimana tambah banyak bukan? Dengan penggunaan yang sangat mudah tentunya banyak yang tambah suka untuk menggunakan plugin ini. Untuk lihat fitur-fiturnya bisa sobat lihat pada demo. Sebenarnya masih ada lagi Text Editor seperti Tiny MCE dan Summernote yang akan saya bahas pada postingan selanjutnya. Sekian postingan saya tentang Memasang Text Editor CKEditor WYSIHTML5 pada PHP dengan Mudah. Jika ada pertanyaan silahkan tinggalkan komentar pada kolom komentar dibawah dan sampai jumpa pada postingan saya selanjutnya.
Baca Juga :
Cara Membuat Text Editor WYSIHTML5 pada PHP dengan TinyMCE
Memasang Text Editor Summernote WYSIHTML5 dengan Mudah
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :