Upload Image Pada TextEditor TinyMCE Pada CodeIgniter

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
defined('BASEPATH') OR exit('No direct script access allowed');
 
class Berita extends CI_Controller {
 
	function index()
	{
		$this->load->view('TinyMCE_View');
	}
 
	function tinymce_upload() {
		$config['upload_path'] = './LOKASI_IMAGE_AKAN_DISIMPAN/';
		$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().'LOKASI_IMAGE_AKAN_DISIMPAN/'.$file['file_name']]))
				->_display();
			exit;
		}
	}

    }

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Berita extends CI_Controller {

function index()

{

$this->load->view('TinyMCE_View');

}

function tinymce_upload() {

$config['upload_path'] = './LOKASI_IMAGE_AKAN_DISIMPAN/';

$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().'LOKASI_IMAGE_AKAN_DISIMPAN/'.$file['file_name']]))

->_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("CONTROLLER_UPLOAD")?>",
		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>

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"

automatic_uploads: true,

image_advtab: true,

images_upload_url: "<?php echo base_url("CONTROLLER_UPLOAD")?>",

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>

Apakah anda memerlukan jasa pembuatan website murah dan profesional kami siap membantu anda dengan memberikan pelayanan terbaik.

  tinymce.jinit({
    selector: 'textarea#file-picker',
    plugins: 'image code',
    toolbar: 'undo redo | link image | code',
    /* enable title field in the Image dialog*/
    image_title: true,
    automatic_uploads: true,

    images_upload_url: '<?php echo base_url("AN_admin/tinymce_upload") ?>',
    file_picker_types: 'image',
    paste_data_images: true,
    relative_urls: false,
    remove_script_host: false,
    /* and here's our custom image picker*/
    file_picker_callback: (cb, value, meta) => {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');

      input.addEventListener('change', (e) => {
        const file = e.target.files[0];

        const reader = new FileReader();
        reader.addEventListener('load', () => {

          const id = 'kepsuk' + (new Date()).getTime();
          const blobCache = tinymce.activeEditor.editorUpload.blobCache;
          const base64 = reader.result.split(',')[1];
          const blobInfo = blobCache.create(id, file, base64);
          blobCache.add(blobInfo);

          /* call the callback and populate the Title field with the file name */
          cb(blobInfo.blobUri(), {
            title: file.name
          });
        });
        reader.readAsDataURL(file);
      });

      input.click();
    },
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
  });

tinymce.jinit({

selector: 'textarea#file-picker',

plugins: 'image code',

toolbar: 'undo redo | link image | code',

/* enable title field in the Image dialog*/

image_title: true,

automatic_uploads: true,

images_upload_url: '<?php echo base_url("AN_admin/tinymce_upload") ?>',

file_picker_types: 'image',

paste_data_images: true,

relative_urls: false,

remove_script_host: false,

/* and here's our custom image picker*/

file_picker_callback: (cb, value, meta) => {

const input = document.createElement('input');

input.setAttribute('type', 'file');

input.setAttribute('accept', 'image/*');

input.addEventListener('change', (e) => {

const file = e.target.files[0];

const reader = new FileReader();

reader.addEventListener('load', () => {

const id = 'kepsuk' + (new Date()).getTime();

const blobCache = tinymce.activeEditor.editorUpload.blobCache;

const base64 = reader.result.split(',')[1];

const blobInfo = blobCache.create(id, file, base64);

blobCache.add(blobInfo);

/* call the callback and populate the Title field with the file name */

cb(blobInfo.blobUri(), {

title: file.name

});

reader.readAsDataURL(file);

});

input.click();

content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'

});

Dibaca: 7,225

Baca Juga

Rekomendasi untuk kamu