How to insert an image in the TinyMCE editor from the computer? - CoderMen

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

We all know that a rich text box editor is important for blog post types of websites. for a well-formatted blog post, we need a rich text box editor and when we post a blog to describe we must need many images and posters.

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

Table of Contents

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="//www.codermen.com/css/bootstrap.min.css">
    <script src=//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js></script>
    <script src=//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 >
    <div >
      <div >
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <input name=image type=file id="upload" onchange="">
      </div>
      <div ></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.