Cara Rusli

Tinymce

Tinymce adalah sebuah text editor yang biasanya digunakan di website. Seseorang yang ingin kemudahan saat membuat posting di web agar seperti pada saat menulis postingan di blogger atau wordpress pasti akan memasang dan menggunakan Tinymce text editor ini ke dalam websitenya.

Kali ini saya akan membuat upload image tanpa plugin filemanager pada tinymce saya menggunakan framework codeigniter.

Download : CodeIgniter dan TinyMCE

Menggunakan Controller sebagai berikut

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Berita extends CI_Controller {
    
    public function __construct()   {
        parent::__construct();
        $this->load->model('admin/berita_model');
    }
    
    public function index() {
        $query = $this->berita_model->daftar_berita();
        $data=array('title'=>'Manajemen Berita - Java Web Media',
                    'berita' => $query,
                    'isi'  =>'admin/berita/berita_view'
                        );
        $this->load->view('admin/layout/wrapper',$data);    
    }

    function tinymce_upload() {
        $config['upload_path'] = "'.base_url().'uploads/artikel/artikel/";//tempat penyimpanan image
        
        $config['allowed_types'] = 'jpg|png|jpeg';
        $config['max_size'] = 0;
        $this->load->library('upload', $config);
        if ( ! $this->upload->do_upload('file')) {
            $this->output->set_header('HTTP/1.0 500 Server Error');
            exit;
        } else {
            $file = $this->upload->data();
            $this->output
                ->set_content_type('application/json', 'utf-8')
                ->set_output(json_encode(['location' => base_url().'uploads/artikel/artikel/'.$file['file_name']]))//pemanggialan image
                ->_display();
            exit;
        }
    }

Menggunakan View Sebagai Berikut

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({
        selector: "#post_content",
        plugins: [
             "advlist autolink lists link image charmap print preview hr anchor pagebreak",
             "searchreplace wordcount visualblocks visualchars code fullscreen",
             "insertdatetime nonbreaking save table contextmenu directionality",
             "emoticons template paste textcolor colorpicker textpattern"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image responsivefilemanager",
        automatic_uploads: true,
        image_advtab: true,
        images_upload_url: "<?php echo base_url("berita/tinymce_upload")?>",//pemanggilan controller
        file_picker_types: 'image', 
        paste_data_images:true,
        relative_urls: false,
        remove_script_host: false,
          file_picker_callback: function(cb, value, meta) {
             var input = document.createElement('input');
             input.setAttribute('type', 'file');
             input.setAttribute('accept', 'image/*');
             input.onchange = function() {
                var file = this.files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                   var id = 'post-image-' + (new Date()).getTime();
                   var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                   var blobInfo = blobCache.create(id, file, reader.result);
                   blobCache.add(blobInfo);
                   cb(blobInfo.blobUri(), { title: file.name });
                };
             };
             input.click();
          }
   });
</script>
 
<textarea rows="25" id="post_content" name="post_content" class="form-control ckeditor"></textarea>