X
    Categories: PHPYII

TinyMce with Image Upload

TinyMce with Image Upload

Hi, In this tutorial we are going to see how to upload local images or image upload to TinyMce Editor. In Old version of tinymce editor we need to install image upload plugin and call it to tinymce init function. To overcome this now tinymce has predefined image upload option. which will convert image as blog and base64 format and store to local server. Lets see how to work on it. We can use this for normal html, php as well as frameworks.

Download Latest version of TinyMce Here

Extract downloaded file to your project folder.

Demo Download

 

The structure will be

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

Call tinymce.min.js file to your project file.

<script src="tinymce/js/tinymce/tinymce.min.js"> </script>

Init tinymce to textarea

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 Which will used to store local images.


Full Source Code :

<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; line-height: 2 }
  .space { margin-bottom: 30px; margin-top: 30px; }
</style>
</head>
<body>
<div class="container">
    <div class="header">
      <img src="http://www.17educations.com/wp-content/uploads/2016/08/17logo-300x86.png">
      <h2> Tinymce with ImageUpload </h2>
    </div>
    <textarea name="" id="" cols="30" rows="10"></textarea>
      <input name="image" type="file" id="upload" class="hidden" onchange="">
</div>

<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>
Demo Download

 

Thats all now you can use this script to store local images.

For yii 2 :

Place this tinymce folder in vendor directory and render js from vendor foler Like below

<script src="../../vendor/tinymce/js/tinymce/tinymce.min.js"> </script>

Thats it now you can access this for YII2 also.
Thanks for reading this article.
If you like this article donr forget to share and comment.
Happy Coding!!!,

Marimuthu: