Hello guys, this article will provide example of how to use and integrated text editor TinyMCE in PHP Framework Codeigniter 4. This step by step tutorial integrated TinyMCE will help you to use text editor in your Codeigniter 4 project. So, let’s scroll and follow below this tutorial.
TinyMCE merupakan sebuah tools text editor yang sangat membantu web programmer maupun content writer serta content administrator website untuk mempermudah mengolah teks pada form textarea.
Pada pembuatan sebuah project website akan serasa tidak lengkap jika pada form textarea tidak menggunakan text editor untuk menginputkan data text maupun berita. Kebutuhan yang mendesak akan kebutuhan teks editor terkadang tidak menyempatkan para website programmer untuk membuat text editor berbasis HTML.
TinyMCE merupakan solusi cara tercepat yang dapat membantu para web programmer dalam membuat teks editor pada project web yang mereka kerjakan. Pada tutorial kali ini saya akan berbagi dengan Anda cara menggunakan teks editor TinyMCE pada project Codeigniter 4. Tutorial ini berisikan langkah demi langkah cara menggunakan serta mengintegrasikan teks editor TinyMCE pada framework PHP Codeigniter 4.
Berikut ini adalah step by step langkah menggunakan serta mengintegrasikan tes editor TinyMCE pada Codeigniter 4.
- Download TinyMCE
Langkah pertama menggunakan teks editor TinyMCE pada Codeigniter 4 adalah dengan mendownload teks editor TinyMCE pada website resminya di tinymce.com
- Mengekstrak Teks Editor TinyMCE
Setelah berhasil mendownload teks editor TinyMCE maka langkah selanjutnya adalah meng-ekstrak kedalam direktori public/assets seperti pada gambar berikut :
- Membuat Code HTML Form Textarea
Langkah berikutnya adalah dengan menyiapkan code HTML form textarea, berikut ini adalah contoh code html form textarea.
<section>
<h1>Form Editor</h1>
<form>
<textarea></textarea>
</form>
</section>
- Menyisipkan Code Javascript TinyMCE
Langkah selanjutnya adalah menyisipkan file javascript akan TinyMCE, penyisipan file javascript dapat dilakukan didalam html tag <head> sebelum </head> maupun didalam html tag <body> sebelum akhir tag </body>.
<!-- tinymce -->
<script src="<?php echo base_url(); ?>/assets/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/tinymce/js/tinymce/plugins/table/plugin.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/tinymce/js/tinymce/plugins/paste/plugin.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/tinymce/js/tinymce/plugins/spellchecker/plugin.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/tinymce/js/tinymce/plugins/autolink/plugin.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/tinymce/js/tinymce/plugins/anchor/plugin.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/tinymce/js/tinymce/plugins/emoticons/plugin.min.js"></script>
<script src="<?php echo base_url(); ?>/assets/fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<!-- END TINYMCE -->
- Meyiapkan Code Javascript
Pada langkah ini adalah kita menyiapakan code javascript yang nantinya digunakan untuk mengatur bagiamana teks editor TinyMCE ditampilkan.
Menampilkan teks editor TinyMCE dapat dilakukan dengan membaca elemen tertentu pada html seperti tag div (#), tag class (.) maupun semua element <textarea>. Informasi lebih lanjut dalam penerapan code dapat dibaca pada dokumentasi resminya di website editor tinymce.com.
<script>
tinymce.init({
selector: "textarea",theme: "modern",
branding: false,
menubar: false,
relative_urls: false,
remove_script_host : false,
width :'800',
height: '600',
plugins: [
"autoresize advlist media image autolink link lists charmap print fullscreen preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars insertdatetime nonbreaking",
"table contextmenu directionality emoticons paste textcolor responsivefilemanager code"
],
toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
toolbar2: "media image | link unlink anchor | forecolor backcolor | table | print preview code fullscreen",
image_advtab: true ,
});
</script>
- Demo
Langkah final adalah dengan mengakses form textarea yang dikenai teks editor TinyMCE, untuk melihat hasil demo dapat menjalankan Codeigniter 4 Server Development dengan mengetikkan dan menjalankan perintah command line sperti berikut :
php spark serve
Jika berjalan dengan baik maka akan ditampilkan form yang menampilkan teks editor TinyMCE seperti berikut :
Selesai, nah diatas adalah langkah demi langkah tentang cara menggunakan teks editor TinyMCE pada Codeigniter 4. Semoga tutorial kali ini dapat membantu dan memberi manfaat bagi yang membutuhkan. Terimakasih telah berkunjung di Jogjatech.com, and happy coding 🙂
