Memasang WYSIWYG TinyMce di Web

Publish Date : 07-09-2017 , dibaca 7097 kali, Hari ini dibaca : 3 kali ,0 comments

Tutorial kali ini kita akan membaha cara memasang Editor WYSiwyG TinyMce di Website, Editor yang satu ini pasti sangat dibutuhkan oleh web developer untuk mengganti textarea menjadi editor yang lebih keren.. bahkan seperti Ms.word, Dengan adanya editor TinyMce yang bisa didapatkan secara gratis atau free membuat anda atau seorang web developer diwajibkan (menurut saya) untuk memasang editor ini di website anda.. kenapa..?

Plugin Editor Wysiwyg yang satu ini tentu memanjakan pengguna website untuk mengedit content nya langsung dengan mudah, tanpa harus mengetikkan kode HTML,

OK..langsung saja kita membahas Cara memasang Editor Tinymce

Download Tinymce Terbaru ,

HTML CODE :

Tambahkan id "myTextarea" pada Textarea yang ingin kita buat Editor Tinymce,

<textarea name="myTextarea" id="myTextarea"></textarea>

JAVASCRIPT CODE :

Include plugin tinymce , sebelum tag </head>

<script src='tinymce/tinymce.min.js'></script>

Berikut ini code javascript yang digunakan untuk memangil selector id "#myTextarea" ,

tinymce.init({
    selector: '#myTextarea'
});

Dari code diatas maka akan menampilkan basic ediotr tinymce :

Berikut ini adalah contoh code yang memanggil seluruh Plugin tinymce :

tinymce.init({
    selector: '#myTextarea',
    height: 500,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'emoticons template paste textcolor colorpicker textpattern imagetools'
    ],
    toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    toolbar2: 'print preview media | forecolor backcolor emoticons',
    image_advtab: true
});

Berikut adalah hasilnya :

CODE LENGKAP :

<!DOCTYPE html>
<head>
<title>Membuat Editor Wysiwyg : suckittrees.com</title>
<script src='tinymce/tinymce.min.js'></script>
<script>
tinymce.init({
    selector: '#myTextarea',
    height: 500,
    theme: 'modern',
    plugins: [
      'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      'searchreplace wordcount visualblocks visualchars code fullscreen',
      'insertdatetime media nonbreaking save table contextmenu directionality',
      'emoticons template paste textcolor colorpicker textpattern imagetools'
    ],
    toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
    toolbar2: 'print preview media | forecolor backcolor emoticons',
    image_advtab: true
});
</script>
</head>
<body>
<textarea name="myTextarea" id="myTextarea"></textarea>
</body>
</html>