TinyMCE Editor Upload Image with PHP & Ajax

Posted onby
TinyMCE is the world’s most popular open source web-based WYSIWYG editor. It has the ability to convert HTML textarea fields or other HTML elements to editor instances. This example demonstrates the integration of upload image in TinyMCE Editor using setup handler with PHP upload functionality. In this tutorial, we will explain you how to use TinyMCE Editor Upload Image with PHP and Ajax.
Also Read : Convert Timestamp to Time Ago using PHP
So let’s implement TinyMCE Editor Upload Image with PHP. look following folder and file structure:
  • tinymce-upload-image-with-php-ajax
    • assets
      • css
        • style.css
      • tinymce.min.js
      • custom.tinymce.js
      • upload
    • templates
      • header.php
      • footer.php
    • index.php
    • upload.php
Step 1: Include jQuery and TinyMCE Plugins
Step 2: Create HTML Form with textarea
In index.php file, we will create a HTML Form with Textarea to load TinyMCE.
Step 3: Initialize TinyMCE Editor
TinyMCE editor can be added to a textarea element with the id tiny-editor using
tinymce.init({
    selector: 'textarea#tiny-description',
    width:'100%',
    height: 250,
     plugins: [
        "code ",
        "paste"
    ],
    toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code image_upload",
    menubar:false,
    statusbar: false,
    content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",
    setup: function(editor) {
        var fileInput = $('');
        jQuery(editor.getElement()).parent().append(fileInput);
        fileInput.on("change",function(){           
            var filename = this.files[0];
            var reader = new FileReader();          
            var formData = new FormData();
            var files = filename;
            formData.append("file",files);
            formData.append('filetype', 'image');               
            jQuery.ajax({
                url: "upload.php",
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                async: false,
                dataType: 'json',
                success: function(json){
                    var fileName = json.file_path;
                    if(fileName) {
                        editor.insertContent('');
                    }
                }
            });             
            reader.readAsDataURL(filename);  
        });    

        // add Button
        editor.ui.registry.addButton('image_upload', {
          icon: 'image',
          onAction: () => {
                fileInput.trigger('click');
            }
        });
        
    }
});
Step 4: Complete HTML file named index.php


 
    

      

        

          
TinyMCE Editor Upload Image with PHP & Ajax
Step 5: Create a file named upload.php
PHP Upload Image Handler
 $filePath));
} else {
    header("HTTP/1.1 500 Server Error!");
}
?>
Create header.php and footer.php section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header and footer section.
header.php



  
    
  
  
  
  
  
  
  
  
  TinyMCE Editor Upload Image with PHP & AJAX | Web Haunt
footer.php
Also Read : CCAvenue Payment Gateway Integration using PHP
Demo Download