contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Memasang WYSIWYG TinyMce di Web

Posted in Javascript Jquery Life at 07 September 2017 With 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,

▼ Download Source Code Dibawah Ini ▼


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 :

membuat editor 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 :

memasang editor tinymce4

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>

Untuk custom TinyMCE anda dapat melihat artikel

Artikel Rekomendasi



Artikel Terkait

Diskusi