How to insert image in TinyMCE editor from computer

In this blog post, we learn how to upload or insert an image in TinyMCE editor from a computer step by step.

Step:1 create a new page

Create a new page and add some code in the header

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://www.codermen.com/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
    <title>TinyMCE image upload</title>

next, add some code in the body part to view TinyMCE editor

<div class="container">
        <div class="row">
            <div class="col-md-8">
                <textarea name="" id="" cols="30" rows="10"></textarea>
                <input name="image" type="file" id="upload" class="hidden" onchange="">
            </div>
            <div class="col-md-4"></div>
        </div>
    </div>

Step:2 Add some CSS and Script 

Now, add some CSS code to hide the input text box named image.

<style>
    .hidden{display:none;}
</style>

At the last add some script to display TinyMCE editor with image upload feature.

<script>
    $(document).ready(function() {
        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>

Now run your application in your favorite browser and see the result.

Great, It works like Charm, let's click on the image icon button.

Good, now you can insert or upload an image in TinyMCE editor from a computer-like.

Perfect, it works, Enjoy your day.