Widodo

Menambah Fitur Uploader Pada TinyMCE dengan Kcfinder

TINYMCE

Selamat siang teman-teman sudah lama kami tidak memberikan tutorial-tutorial sederhana ke teman-teman, untuk itu kami akan memberi tutorial sederhana yaitu menambah fasilitas upload di tinyMCE, tinyMCE adalah suatu editor yang memungkinkan user untuk menentukan format, ukuran dan jenis huruf, menambahkan hyperlink dan tabel, dan juga bisa mengupload file, gambar, animasi flash, dan video dan saat ini banyak sekali WYSIWYG seperti TinyMCE, Sumernote,Ckeditor, Elrte dll , tetapi yang mau saya bahas ini tentang Integrasi TinyMCE dengan KCfinder atau bisa disebut Images Manager, Sebenarnya sudah banyak tutorial yang bisa didapatkan di salah satu search engine seperti google dll, atau secara originalnya bisa membuka document dari situs TinyMCE  sebenarnya penggabungan antara TinyMCE dengan KCfinder gak begitu susah bagi yang sudah pernah memasang TinyMCE, mungkin langsung saja kita pelajarin bersama-saman bagi kalian yang belum tahu penerapanya..

Sebelumnya silahkan download CKEditor dan CKfinder dibawah ini

Download TinyMCE Dev Package

Download

Download Kcfinder

Download

1. Setelah di download silahkan buat folder di localhost kalian masing2 disini saya memakai nama editor
2. Sekarang buat struktur direktory seperti dibawah ini hasil downloadnya kalian bisa di simpan di dalam folder editor

TinyMCE
3. Setelah itu silahkan kalian buat file index dengan format .php
4. sekarang simpan Code dibwah ini taruh dipaling atas

<?php session_start();
//permession upload
$_SESSION['KCFINDER']=array();
$_SESSION['KCFINDER']['disabled'] = false;
$_SESSION['KCFINDER']['uploadURL'] = "../images/"; //sesuaikan dengan direkory kalian
$_SESSION['KCFINDER']['uploadDir'] = "";
?>

Scripts diatas adalah permession Kcfinder, fungsinya supaya tidak ada yg bisa akses selain admin, dan jangan lupa tentukan direktory uploadernya

5. Sekarang panggil jquery/js tinyMCE seperti dibawah ini
   <script src="./tinymce/tinymce.min.js"></script>

6. Setelah itu kalian buat 1 textarea seperti dibawah ini

<textarea name="artikel_konten" cols="10" rows="15" class="auto editor form-control" required></textarea>

7. Sekarang simpan scripts TinyMCE ini taruh diatas </body>

<script>
	tinymce.init({
selector: ".editor",
theme: "modern",
skin: 'tundora',
  plugins: [
      "preview wordcount, advlist, autolink, lists, link, image, charmap, print, preview, hr, anchor pagebreak searchreplace wordcount, visualblocks, visualchars, fullscreen, insertdatetime, media, nonbreaking, save, table, contextmenu, directionality, emoticons, paste, textcolor, colorpicker, textpattern,"
  ],
 toolbar: "undo redo | fontselect fontsizeselect | styleselect | bold italic  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blockquote | forecolor backcolor emoticons | table | link image media | preview wordcount fullscreen",
  convert_urls: false,
  theme_advanced_font_sizes : "8px,10px,12px,14px,16px,18px,20px,24px,32px,36px",
  theme_advanced_fonts : "Arial=arial,helvetica,sans-serif;"+
                         "Arial Black=arial black,avant garde;"+
                         "Book Antiqua=book antiqua,palatino;"+
                         "Comic Sans MS=comic sans ms,sans-serif;"+
                         "Courier New=courier new,courier;"+
                         "Century Gothic=century_gothic;"+
                         "Georgia=georgia,palatino;"+
                         "Gill Sans MT=gill_sans_mt;"+
                         "Gill Sans MT Bold=gill_sans_mt_bold;"+
                         "Gill Sans MT BoldItalic=gill_sans_mt_bold_italic;"+
                         "Gill Sans MT Italic=gill_sans_mt_italic;"+
                         "Helvetica=helvetica;"+
                         "Impact=impact,chicago;"+
                         "Iskola Pota=iskoola_pota;"+
                         "Iskola Pota Bold=iskoola_pota_bold;"+
                         "Symbol=symbol;"+
                         "Tahoma=tahoma,arial,helvetica,sans-serif;"+
                         "Terminal=terminal,monaco;"+
                         "Times New Roman=times new roman,times;"+
                         "Trebuchet MS=trebuchet ms,geneva;"+
                         "Verdana=verdana,geneva",
 file_browser_callback: function(field, url, type, win) {
        tinyMCE.activeEditor.windowManager.open({
            file: './kcfinder/browse.php?opener=tinymce4&field=' + field + '&type=' + type,// sesuikan direktory KCfinder
            title: 'KCFinder',
            width: 900,
            height: 550,
            inline: true,
            close_previous: false
        }, {
            window: win,
            input: field
        });
        return false;
    }
});
</script>

8. Sekarang buka folder kcfinder/conf/config.php setelaah kebuka silahkan cari kode

// GENERAL SETTINGS
'disabled' => true,
'uploadURL' => "../images/",
'jpegQuality' => 100,
'uploadDir' => "../images/",
'theme' => "default",

Sekarang sesuaikan direktory uploadernya

9. Selesai dan searang jalanakan semoga berhasil ya....

Happy Coding :)



0 Komentar