Forum : Upload une image avec TinyMCE

Bonjour,

Utilisant TinyMCE comme editeur pour mon blog, j'utilise en parallèle Responsive File Manager pour gérer les uploads de fichiers et d'images. Cependant, si je veux modifier une image directement depuis TinyMCE, il faut que je l'upload (techniquement elle existe déjà l'image, donc il faudrait que je la remplace)

TinyMCE met ceci à disposition des utilisateurs :

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

Cependant j'ai un peu du mal avec son utilisation

Notamment ces lignes que je ne comprends absolument pas :

tinymce.activeEditor.uploadImages(function(success) {
  $.post('ajax/post.php', tinymce.activeEditor.getContent()).done(function() {
    console.log("Uploaded images and posted content as an ajax request.");
  });
});

Et je vois qu'il faut l'utiliser avec le script PHP Upload Handler :

<?php
  /*******************************************************
   * Only these origins will be allowed to upload images *
   ******************************************************/
  $accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");

  /*********************************************
   * Change this line to set the upload folder *
   *********************************************/
  $imageFolder = "images/";

  reset ($_FILES);
  $temp = current($_FILES);
  if (is_uploaded_file($temp['tmp_name'])){
    if (isset($_SERVER['HTTP_ORIGIN'])) {
      // same-origin requests won't set an origin. If the origin is set, it must be valid.
      if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
      } else {
        header("HTTP/1.0 403 Origin Denied");
        return;
      }
    }

    /*
      If your script needs to receive cookies, set images_upload_credentials : true in
      the configuration and enable the following two headers.
    */
    // header('Access-Control-Allow-Credentials: true');
    // header('P3P: CP="There is no P3P policy."');

    // Sanitize input
    if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
        header("HTTP/1.0 500 Invalid file name.");
        return;
    }

    // Verify extension
    if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
        header("HTTP/1.0 500 Invalid extension.");
        return;
    }

    // Accept upload if there was no origin, or if it is an accepted origin
    $filetowrite = $imageFolder . $temp['name'];
    move_uploaded_file($temp['tmp_name'], $filetowrite);

    // Respond to the successful upload with JSON.
    // Use a location key to specify the path to the saved image resource.
    // { location : '/your/uploaded/image/file'}
    echo json_encode(array('location' => $filetowrite));
  } else {
    // Notify editor that the upload failed
    header("HTTP/1.0 500 Server Error");
  }
?>

Et je constate bien en effet un changement quand je modifie une image, une barre de chargement apparait rapidement, et le lien source de l'image change. Mais aucune image uploader.

J'ai un peu de mal quand il s'agit d'utiliser les API, et là pour le coup je coince, tout ce que je voudrais c'est un peu d'aide pour que mon image (modifié) soit bien uploader (j'ai évidemment changer le script, notamment le dossier d'image, et l'appel à ce fichier, de ce côté là, ça fonctionne, j'ai bien un retour JSON de la localisation du fichier, mais le fichier n'existant pas..)

Merci de votre aide

Upload une image avec TinyMCE

1 réponse