TinyMCE Editor Upload Image with PHP & Ajax

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

	<script src="assets/tinymce.min.js" referrerpolicy="origin"></script>
 	<script src="assets/custom.tinymce.js"></script>

1 2	<script src="assets/tinymce.min.js" referrerpolicy="origin"></script> <script src="assets/custom.tinymce.js"></script>

Step 2: Create HTML Form with textarea

In index.php file, we will create a HTML Form with Textarea to load TinyMCE.

	<form method="POST" class="tinymce-editor" id="tinymce-editor">
      <div class="row align-items-center">
        <div class="col-md-12 col-md-right">
            <div class="form-group">
              <div class="col-sm-12">
                <textarea class="form-control" rows="5" id="tiny-description" name="description"></textarea>
              </div>
            </div>
        </div>
      </div>
    </form>

</div>

</form>

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 = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
        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('<img src="'+fileName+'"/>');
                    }
                }
            });             
            reader.readAsDataURL(filename);  
        });    

        // add Button
        editor.ui.registry.addButton('image_upload', {
          icon: 'image',
          onAction: () => {
                fileInput.trigger('click');
            }
        });
        
    }
});

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 = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');

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('<img src="'+fileName+'"/>');

}

});

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

<?php
include('templates/header.php');
?>
<script src="assets/tinymce.min.js" referrerpolicy="origin"></script>
 <script src="assets/custom.tinymce.js"></script>
    <section class="showcase">
      <div class="container">
        <div class="pb-2 mt-4 mb-2 border-bottom">
          <h2>TinyMCE Editor Upload Image with PHP & Ajax</h2>
        </div>
        <form method="POST" class="tinymce-editor" id="tinymce-editor">
          <div class="row align-items-center">
            <div class="col-md-12 col-md-right">
                <div class="form-group">
                  <div class="col-sm-12">
                    <textarea class="form-control" rows="5" id="tiny-description" name="description"></textarea>
                  </div>
                </div>
            </div>
          </div>
        </form>
      </div>
  </section>
<?php 
include('templates/footer.php');
?>

<?php

include('templates/header.php');

<h2>TinyMCE Editor Upload Image with PHP & Ajax</h2>

</div>

</div>

</form>

</div>

</section>

<?php

include('templates/footer.php');

Step 5: Create a file named upload.php

PHP Upload Image Handler

<?php
// Allowed the origins to upload 
$accepted_origins = array("http://localhost", "https://webhaunt.com/");
// Images upload dir path
$uploadFolder = "assets/upload/";
reset($_FILES);
$tmp = current($_FILES);
if(is_uploaded_file($tmp['tmp_name'])){
    if(isset($_SERVER['HTTP_ORIGIN'])){
        if(in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)){
            header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        }else{
            header("HTTP/1.1 403 Origin Denied");
            return;
        }
    }
    // check valid file name
    if(preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $tmp['name'])){
        header("HTTP/1.1 400 Invalid file name!");
        return;
    }

    // check and Verify extension
    if(!in_array(strtolower(pathinfo($tmp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png", "bmp"))){
        header("HTTP/1.1 400 Invalid file extension!");
        return;
    }
  
    // Accept upload if there was no origin, or if it is an accepted origin
    $filePath = $uploadFolder . $tmp['name'];
    move_uploaded_file($tmp['tmp_name'], $filePath);
    // return successful JSON.
    echo json_encode(array('file_path' => $filePath));
} else {
    header("HTTP/1.1 500 Server Error!");
}
?>

<?php

// Allowed the origins to upload

$accepted_origins = array("http://localhost", "https://webhaunt.com/");

// Images upload dir path

$uploadFolder = "assets/upload/";

reset($_FILES);

$tmp = current($_FILES);

if(is_uploaded_file($tmp['tmp_name'])){

if(isset($_SERVER['HTTP_ORIGIN'])){

if(in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)){

header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);

}else{

header("HTTP/1.1 403 Origin Denied");

return;

}

// check valid file name

if(preg_match("/([^\w\s\d\-_~,;:\[\].])|([\.]{2,})/", $tmp['name'])){

header("HTTP/1.1 400 Invalid file name!");

return;

}

// check and Verify extension

if(!in_array(strtolower(pathinfo($tmp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png", "bmp"))){

header("HTTP/1.1 400 Invalid file extension!");

return;

}

// Accept upload if there was no origin, or if it is an accepted origin

$filePath = $uploadFolder . $tmp['name'];

move_uploaded_file($tmp['tmp_name'], $filePath);

// return successful JSON.

echo json_encode(array('file_path' => $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

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="canonical" href="https://www.webhaunt.com/" />
  <meta name="author" content="WebHaunt">  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="https://webhaunt.com/wp-content/uploads/2016/11/webhaunt-150x142.png" sizes="32x32" />
  <link rel="icon" href="https://webhaunt.com/wp-content/uploads/2016/11/webhaunt.png" sizes="192x192" />
  <link rel="apple-touch-icon-precomposed" href="https://webhaunt.com/wp-content/uploads/2016/11/webhaunt.png" />
  <meta name="msapplication-TileImage" content="https://webhaunt.com/wp-content/uploads/2016/11/webhaunt.png" />
  <title>TinyMCE Editor Upload Image with PHP & AJAX | Web Haunt</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
  <!-- Custom fonts for this template -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template -->
  <link href="assets/css/style.css" rel="stylesheet"> 
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;">
  <div class="container">
    <a class="navbar-brand font-weight-bold" href="https://webhaunt.com"><h1>Web Haunt</h1></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="https://webhaunt.com/">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://webhaunt.com/php-script-free-demo/">LIVE DEMO</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!DOCTYPE html>

<head>

<title>TinyMCE Editor Upload Image with PHP & AJAX | Web Haunt</title>

</head>

<body>

<a class="navbar-brand font-weight-bold" href="https://webhaunt.com"><h1>Web Haunt</h1></a>

</button>

<a class="nav-link" href="https://webhaunt.com/">Home

<span class="sr-only">(current)</span>

</a>

</li>

</li>

</ul>

</div>

</nav>

footer.php

<!-- Start Footer -->
  <footer class="footer bg-light footer-bg-dark">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
          <ul class="list-inline mb-2">
            <li class="list-inline-item">
              <a href="#">About</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Contact</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Terms of Use</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Privacy Policy</a>
            </li>
          </ul>
          <p class="small mb-4 mb-lg-0" style="color: #E6ECF0;">Copyright &copy;  2017 - <?php print date('Y', time());?> <a style="color: #E6ECF0;" href="https://webhaunt.com/">WEBHAUNT.COM</a> All rights reserved.</p>
        </div>
        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
          <ul class="list-inline mb-0">
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-facebook fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-twitter-square fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <i class="fab fa-instagram fa-2x fa-fw"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <!-- include Bootstrap core JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>

<a href="#">About</a>

</li>

<a href="#">Contact</a>

</li>

<a href="#">Terms of Use</a>

</li>

<a href="#">Privacy Policy</a>

</li>

</ul>

<p class="small mb-4 mb-lg-0" style="color: #E6ECF0;">Copyright © 2017 - <?php print date('Y', time());?> <a style="color: #E6ECF0;" href="https://webhaunt.com/">WEBHAUNT.COM</a> All rights reserved.</p>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</footer>

</body>

</html>

Also Read : CCAvenue Payment Gateway Integration using PHP

Demo Download