Cara Memasang Html Editor Tynimce di PHP

Cara Memasang Html Editor Tynimce di PHP

Dalam dunia programming, html editor seperi tynimce ini sangat dibutuhkan tentunya, untuk memanage sebuah data content yang memang tidak perlu menggunakan banyak field, contohnya seperti content artikel berita.

Tynimce ini merupakan salah satu teknologi wysiwyg yaitu what you see is what you get, yang membuat para programmer bisa menggunakannya dengan mudah, nah salah satunya saya akan menerapkan html editor tynimce ini pada sebuah file php. 
Dalam tutorial ini tentunya membutuhkan file tynimcenya yang bisa kalian download disini dan juga file jquery yang bisa kalian download di jquery.com
Langsung saja berikut cara memasang html editor tynimce di php. sebelumnya disini saya menggunakan Tynimce versi 4.
  • Buat project baru dengan nama htmleditor lalu buat file php baru dengan nama index.php dan simpan didalam folder htmleditor yang sudah dibuat. jangan lupa untuk menaruh project ini di folder htdocs kalian.
  • Selanjutnya masukan script dibawah ini pada file index.php tadi.

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title> HTML EDITOR </title>

</head>

<body>
<H1>HTML EDITOR - Tynimce</H1>

<div style="width:50%">
<textarea class="" rows="8" name="alamat" id="alamat"></textarea>
</div>

</body>


<!-- jQuery Version 1.11.0 -->
<script src="jquery.min.js"></script>

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>

<!-- fungsi dari tynimce yang digunakan-->

<script type="text/javascript">
tinymce.init({
selector: "textarea#alamat",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>

Jika sudah kalian masukan dengan benar script diatas, maka hasilnya akan seperti gambar dibawah ini.

Cara Memasang Html Editor Tynimce di PHP
Mudah dan singkat bukan cara memasang html editor tynimce ini, inilah teknologi yang dinamakan wysiwyg, membuat para programmer dimanjakan dan tidak perlu pusing hihi.
Sekian pembahasan mengenai artikel kali ini, jika ada yang ditanyakan jangan ragu untuk menanyakannya di kolom komentar, terimakasih telah berkunjung ke blog ini 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *