Cara Membuat HTML Editor Menggunakan TinyMCE - Salam buat teman-teman yang membaca artikel ini. Sedikit saya jelaskan mengenai TinyMCE ini. TinyMCE ini adalah sebuah platform yang berbasis web, dimana telah di independen dari Javascript HTML WYSIWYG Editor. HTML Editor ini dirilis dengan open source atau gratis, tetapi ada juga versi yang premium atau berbayar. Bedanya apa sih.? Dari yang saya baca, salah satu perbedaan antara premium dengan free yaitu fitur-fiturnya. Saya belum pernah beli yang premium, jadi saya belum dapat simpulkan mengenai fitur-fitur apa yang menjadi perbedaannya.
Saya lanjutkan dengan judul topik. Kita akan mencoba pada halaman PHP, jadi yang anda butuhkan ialah file baru dengan nama editor.php(boleh juga bro di halaman HTML). Lalu membuat tag dasar dari HTML.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat HTML Editor</title>
</head>
<body>
</body>
</html>
Script diatas merupakan hal yang mendasar, kita masih memiliki script lanjutannya. Ooopss, hampir kelupaan bro. Pertama-tama anda mendownload TinyMCEnya di situs nya https://www.tinymce.com/download/ , anda ekstrak filenya lalu simpan di folder HTDOCS anda. Untuk mengaktifkan pluginnya, gunakan script dibawah bro.
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
Folder "tinymce" tersebut adalah file yang anda downlad tadi, jadi anda sesuaikan dengan yang anda miliki foldernya. Dan yang kedua, gunakan script dibawah untuk menggunakan fitur-fitur atau plugin-plugin dari TinyMCE ini.
<script type="text/javascript">
tinymce.init({
selector: ".pesan",
width:400,
height: 400,
// ===========================================
// INCLUDE THE PLUGIN
// ===========================================
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages",
"pagebreak"
],
// ===========================================
// PUT PLUGIN'S BUTTON on the toolbar
// ===========================================
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages",
// ===========================================
// SET RELATIVE_URLS to FALSE (This is required for images to display properly)
// ===========================================
relative_urls: false
});
</script>
Pada bagian selector:".pesan" merupakan nama dari textarea yang akan kita buatkan nanti. Oke, langsung ke tahap tiga atau terakhir yaitu membuat form textareanya, gunakan script dibawah ya bro. Oh ya, pastikan script javascript tadi diatas di dalam tag <head></head>.
<form method="post" action="">
Nama : <input type="text" name="nama"><br><br>
Pesan : <textarea name="pesan" class="pesan" ></textarea>
</form>
Nah, nama atau name dari textarea di sesuaikan dengan nama pada script selector tadi. Jadi script menyeluruhnya dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat HTML Editor</title>
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: ".pesan",
width:400,
height: 400,
// ===========================================
// INCLUDE THE PLUGIN
// ===========================================
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages",
"pagebreak"
],
// ===========================================
// PUT PLUGIN'S BUTTON on the toolbar
// ===========================================
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages",
// ===========================================
// SET RELATIVE_URLS to FALSE (This is required for images to display properly)
// ===========================================
relative_urls: false
});
</script>
</head>
<body>
<form method="post" action="">
Nama : <input type="text" name="nama"><br><br>
Pesan : <textarea name="pesan" class="pesan" ></textarea>
</form>
</body>
</html> Jika script diatas di jalankan maka akan memiliki tampilan seperti gambar dibawah ini.
Gimana bro.?? Cukup mudah bukan.?? Oke, sampai disini tutorial Cara Membuat HTML Editor Menggunakan TinyMCE semoga dapat bermanfaat bagi anda, bagi yang memiliki masalah dengan tutorial ini, boleh cantumkan komentar.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
