Add and Delete Images from the Server in TinyMCE editor using PHP


Hello there, In this tutorial we will learn how to add and delete images from the server using TinyMCE editor callback and AJAX code, you can use the following steps:

Step 1: Create a PHP script on your server that will handle uploading the image file. Let's call it upload_image.php. The script should take the uploaded image file, save it to the server, and return the URL of the saved image.


<?php
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
    echo json_encode(array("location" => $targetFile));
} else {
    echo "Error uploading file.";
}
?>


Step 2: In your TinyMCE editor initialization code, set up a callback function for the images_upload_handler event. This event is triggered when an image is uploaded in the editor. In the callback function, you can make an AJAX request to the upload_image.php script to upload the image file to the server.


tinymce.init({
  // ... other initialization code ...
  images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;
    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open("POST", "upload_image.php");
    xhr.onload = function() {
      var json;
      if (xhr.status != 200) {
        failure("HTTP Error: " + xhr.status);
        return;
      }
      json = JSON.parse(xhr.responseText);
      if (!json || typeof json.location != "string") {
        failure("Invalid JSON: " + xhr.responseText);
        return;
      }
      success(json.location);
    };
    formData = new FormData();
    formData.append("file", blobInfo.blob(), blobInfo.filename());
    xhr.send(formData);
  },
  // ... other initialization code ...
});

In the above code, we use the images_upload_handler configuration option to set up a callback function for handling image uploads. Inside this function, we create a new XMLHttpRequest object and set it up to send a POST request to the upload_image.php script. We also set up a FormData object and append the uploaded image file to it. When the server responds with the URL of the saved image, we call the success function with the URL so that TinyMCE can insert the image into the editor.

Step 3: To delete an image from the server, you can use the same approach as described in the previous answer. Set up a callback function for the images_replaced event, extract the URL of the old image, make an AJAX request to a PHP script to delete the file from the server.


tinymce.init({
  // ... other initialization code ...
  setup: function (editor) {
    editor.on('images_replaced', function (e) {
      var oldSrc = e.blobInfo.blobUri;
      var oldFile = oldSrc.split('/').pop();
      var data = new FormData();
      data.append('file', oldFile);
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'delete_image.php', true);
      xhr.onload = function () {
        if (xhr.status === 200) {
          console.log(xhr.responseText);
        } else {
          console.log('Error deleting file.');
        }
      };
      xhr.send(data);
    });
  }
});

Note: Make sure that you have proper file permissions set up on your server to allow uploading and deletion of files. Also, this code assumes that your server-side scripts are written in PHP. If you're using a different server-side language, you'll need

       

Advertisements

ads