Cara Menggunakan TinyMCE

Cara Menggunakan TinyMCE
Cara Menggunakan TinyMCE

Cara Membuat atau Menggunakan Text Editor WYSIHTML5 pada PHP dengan TinyMCE - Pada sebuah proyek yang admin kerjakan, terdapat sebuah fitur yang harus menggunakan teks editor untuk menginputkan nilainya. Karena deadline proyek ini begitu cepat bagi admin. Admin tidak punya banyak waktu untuk membuat teks editor berbasis HTML.

Karena itu, cara yang  tercepat menurut admin ialah menggunakan teks editor yang sudah ada, yaitu TinyMCE. Nah, pada kesempatan ini, admin akan berbagi cara menerapkan TinyMCE dalam Web. Nah pada proyek yang admin kerjakan waktu itu, admin menggunakan Framework Codeigniter 3. jadi bagi kalian yang memakai codeigniter ya sah - sah aja memakai TinyMCE ini. Langsung aja dilihat tutorial nya.

Membuat TinyMCE Default

  1. Download TinyMCE
  2. Silahkan kalian terlebih dahulu download TinyMCE di situs resminya disini.

  3. Setelah itu kalian bisa masukkan library tinymce yang telah kalian download pada tag <body> paling bawah di file index.php seperti contoh berikut
  4. <script src="tinymce/tinymce.min.js"></script>
  5. Kemudian silahkan kalian membuat file textarea seperti contoh dibawah
  6. <textarea name="default" id="default"></textarea>
  7. Lalu kalian Tambahkan tag <script> dibawah file javascript tinymce.js dengan kode dibawah
  8. <script>
      tinymce.init({ selector:'#default', });
    </script>
  9. Jika kalian jalankan project kalian maka tampilanya akan menghasilkan seperti gambar dibawah

Membuat Custom pada TinyMCE

Menu pada plugin TinyMCE juga sangat begitu banyak, dan kalian juga bisa mengkostumnya sesuai yang kalian inignkan menampilkan yang mana saja seperti pada CKEditor. Caranya adalah sebagai berikut :

  1. Kalian buat terlebih dahulu textarea-nya seperti contoh berikut.
  2. <textarea name="custom" id="custom"></textarea>
  3. Kemudian kalian bisa tambahkan tag <script> dengan kode dibawah.
  4. <script>
          tinymce.init({
          selector: '#custom',
          height: 400,
          forced_root_block : "",
          force_br_newlines : true,
          force_p_newlines : false,
          plugins: [
            '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 codesample toc'
          ],
          toolbar1: 'undo redo | insert | styleselect table | bold italic | hr alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media ',
          toolbar2: 'print preview | forecolor backcolor emoticons | fontselect | fontsizeselect | codesample code fullscreen',
          templates: [
            { title: 'Test template 1', content: '' },
            { title: 'Test template 2', content: '' }
          ],
          content_css: [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tinymce.com/css/codepen.min.css'
          ],
        });
    </script>
  5. Jika kalian jalankan project kalian maka pada textarea akan menjadi seperti dibawah

    Namun Jika upload images akan menjadi seperti dibawah dan kalian juga bisa membuat customnya untuk upload images pada TinyMCE dari Local Storage


Membuat Upload Foto pada TinyMCE

Jika kalian telah menggunakan default pada TinyMCE. TinyMCE tidaklah menyediakan form upload Images/Foto oleh karena itu kalian harus terlebih dahulu membuatnya sendiri. Berikut adalah cara membuat form upload foto/gambar pada TinyMCE :

  1. Seperti biasa kalian Buat textarea seperti berikut.
  2. <textarea name="custom2" id="custom2"></textarea>
  3. Lalu pada bagian tag <script> silahkan tambahkan kode berikut.
    tinymce.init({
            selector: '#custom2',
            height: 400,
            file_browser_callback_types: 'file image media',
            file_picker_types: 'file image media',
            forced_root_block : "",
            force_br_newlines : true,
            force_p_newlines : false,
            plugins: [
              '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 codesample toc'
            ],
            toolbar1: 'undo redo | insert | styleselect table | bold italic | hr alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media ',
            toolbar2: 'print preview | forecolor backcolor emoticons | fontselect | fontsizeselect | codesample code fullscreen',
            templates: [
              { title: 'Test template 1', content: '' },
              { title: 'Test template 2', content: '' }
            ],
            content_css: [
              '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
              '//www.tinymce.com/css/codepen.min.css'
            ],
    
            images_upload_url: 'uploadtiny.php',
            images_upload_handler: function (blobInfo, success, failure) {
              var xhr, formData;
            
              xhr = new XMLHttpRequest();
              xhr.withCredentials = false;
              xhr.open('POST', 'uploadtiny.php');
            
              xhr.onload = function() {
                  var json;
              
                  if (xhr.status != 200) {
                      failure('HTTP Error: ' + xhr.status);
                      return;
                  }
              
                  json = JSON.parse(xhr.responseText);
              
                  if (!json || typeof json.location != 'string') {
                      failure('Invalid JSON: ' + xhr.responseText);
                      return;
                  }
              
                  success(json.location);
              };
            
              formData = new FormData();
              formData.append('file', blobInfo.blob(), blobInfo.filename());
              xhr.send(formData);
          },
          });
    Penggunaanya juga begitu mirip seperti custom pertama namun kalian hanya perlu menambahkan baris kode seperti dibawah ini.
    file_browser_callback_types: 'file image media',
    file_picker_types: 'file image media',
    Dan untuk menambahkan action upload maka kalian perlu juga menambahkan kode seperti dibawah.
    images_upload_url: 'uploadtiny.php',
    images_upload_handler: function (blobInfo, success, failure) {
      var xhr, formData;
    
      xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open('POST', 'uploadtiny.php');
    
      xhr.onload = function() {
          var json;
      
          if (xhr.status != 200) {
              failure('HTTP Error: ' + xhr.status);
              return;
          }
      
          json = JSON.parse(xhr.responseText);
      
          if (!json || typeof json.location != 'string') {
              failure('Invalid JSON: ' + xhr.responseText);
              return;
          }
      
          success(json.location);
      };
    
      formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());
      xhr.send(formData);
    },
  4. Seperti yang tertulis uploadtiny.php yang berarti kalian perlu membuat file uploadtiny.php kemudian isikan dengan kode dibawah
  5. <?php
    $tempdir = "upload/";
    if (!file_exists($tempdir))
        mkdir($tempdir);
    
    reset($_FILES);
    $temp = current($_FILES);
    if(is_uploaded_file($temp['tmp_name'])){
        if(isset($_SERVER['HTTP_ORIGIN'])){
            if(in_array($_SERVER['HTTP_ORIGIN'])){
                header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
            }else{
                header("HTTP/1.1 403 Origin Denied");
                return;
            }
        }
      
        if(preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])){
            header("HTTP/1.1 400 Invalid file name.");
            return;
        }
      
        if(!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png", "mp4"))){
            header("HTTP/1.1 400 Invalid extension.");
            return;
        }
        
        $acak = rand(1111111, 9999999).".png";
        $filetowrite = $tempdir . $acak;
        move_uploaded_file($temp['tmp_name'], $filetowrite);
      
        echo json_encode(array('location' => $filetowrite));
    } else {
        header("HTTP/1.1 500 Server Error");
    }
    ?>
  6. Jika kalian jalankan maka pada upload images akan muncul tab upload images seperti gambar dibawah.
  7. Jika kalian klik Browse dan pilih foto maka secara otomatis akan membuat folder upload dan akan terisi gambar yang tadi kalian upload.

Penutup

Sekian postingan admin tentang Cara Membuat atau Menggunakan Text Editor WYSIHTML5 pada PHP dengan TinyMCE. Jika ada pertanyaan silahkan kalian tinggalkan pada kolom komentar dibawah. Jika ada kesalahan saya mohon maaf.