Upload Gambar di TinyMCe

Publish Date : 14-10-2016 , dibaca 11090 kali, Hari ini dibaca : 1 kali ,0 comments

Suckittrees.com , selamat pagi semuanya,, akali ini admin akan share cara upload gambar dengan TinyMCE4 , Secara defaultnya tinyMCE tidak menyediakan langsung fasilitas upload gambar , hanya menyertakan form untuk menambahkan URL gambar , Tentu ini kurang efektif sebagai text editor , dan harus melakukan konfigurasi lagi.

File Manager Upload Gambar yang bisa di kolaborasikan dengan TinyMCE cukup banyak di internet , namun pada artikel kali ini kita tidak menggunakan pihak ke 3 untuk membuat upload Gambar di TinyMce4

Cara UPload Gambar di TinyMce4

Disini kita akan convert gambar ke dalam base64 , cara ini bisa digunakan untuk segala jenis blog, dan framework yang kalian guankan..

OK.. Download TinyMce Terbaru Here

Extrak File Yang anda download tadi, secara umum strukturnya akan berbentuk seperti ini :

–js
–tinymce
— *********
— tinymce.min.js

Panggil tinymce.min.js dan Jquery dengan code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="tinymce/js/tinymce/tinymce.min.js"> </script>

Init tinymce to textarea

Buat file demo.HTML , dan jangan lupa panggil tinymce.min.js dengan code diatas, kemudian pastekan code init tinymce dibawah ini :

tinymce.init({
    selector: "textarea",
    theme: "modern",
    paste_data_images: true,
    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"
    ],
    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,
    file_picker_callback: function(callback, value, meta) {
      if (meta.filetype == 'image') {
        $('#upload').trigger('click');
        $('#upload').on('change', function() {
          var file = this.files[0];
          var reader = new FileReader();
          reader.onload = function(e) {
            callback(e.target.result, {
              alt: ''
            });
          };
          reader.readAsDataURL(file);
        });
      }
    },
    templates: [{
      title: 'Test template 1',
      content: 'Test 1'
    }, {
      title: 'Test template 2',
      content: 'Test 2'
    }]
  });

file_picker_callback merupakan fungsi untuk memanggil gambar

Full Source Code :

agar tidak bingung, saya berikan source Code Lengkapnya :

<html>
<head>
  <title>Tinymce with ImageUpload</title>
  <style> 
  .hidden{display:none;}
  .container { width: 960px; margin: 0 auto; }
  .header, .body { width: 100%; float: left; margin-bottom: 30px; }
  .header img { width: 35%; float: left; }
  .header h2 { width: 60%; float: left; margin-left: 30px; font-size: 28px;text-align:center;}
  .space { margin-bottom: 30px; margin-top: 30px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="header">
      <h2> Tinymce with ImageUpload Suckittrees.Com</h2>
    </div>
    <div class="body">
        <textarea name="" id="" cols="30" rows="10"></textarea>
         <input name="image" type="file" id="upload" class="hidden" onchange="">
    </div>

</div>

</body>

<script src="tinymce/js/tinymce/tinymce.min.js"> </script>
<script type="text/javascript">
  tinymce.init({
    selector: "textarea",
    theme: "modern",
    paste_data_images: true,
    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"
    ],
    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,
    file_picker_callback: function(callback, value, meta) {
      if (meta.filetype == 'image') {
        $('#upload').trigger('click');
        $('#upload').on('change', function() {
          var file = this.files[0];
          var reader = new FileReader();
          reader.onload = function(e) {
            callback(e.target.result, {
              alt: ''
            });
          };
          reader.readAsDataURL(file);
        });
      }
    },
    templates: [{
      title: 'Test template 1',
      content: 'Test 1'
    }, {
      title: 'Test template 2',
      content: 'Test 2'
    }]
  });
</script>
</html>