aller encore un petit effort ...
![]()
ça l'air bon...Je te tiens au courant de la suite...
J'ai enfin pu voir mes echo ou var_dump...
tinymce-process-file.php :
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <?php $imageDirectory = "images/"; $acceptExt = explode(",", "bmp,gif,jfi,jfif,jif,jpe,jpeg,jpg,png,svg,webp"); reset($_FILES); $file = current($_FILES);var_dump($file);echo '<br/>tmp_file uploaded : '.is_uploaded_file($file["tmp_name"]).'<br/>'; if (is_uploaded_file($file["tmp_name"])) { // test extension if (!in_array(strtolower(pathinfo($file['name'], PATHINFO_EXTENSION)), $acceptExt)) { header("HTTP/1.1 400 Invalid extension."); return; } // Déplace le fichier téléchargé $nomFile = $imageDirectory . $file["name"]; move_uploaded_file($file['tmp_name'], $nomFile); // réponse au format JSON echo json_encode(["location" => $nomFile]); }
Donne :
Que me conseilles-tu ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 array(6) { ["name"]=> string(15) "stop-frelon.png" ["full_path"]=> string(15) "stop-frelon.png" ["type"]=> string(9) "image/png" ["tmp_name"]=> string(25) "C:\web\upload\php20FF.tmp" ["error"]=> int(0) ["size"]=> int(147008) } //var_dump ligne 5 tmp_file uploaded : 1 //echo '<br/>tmp_file uploaded : '.is_uploaded_file($file["tmp_name"]).'<br/>'; ligne 5 {"location":"images\/stop-frelon.png"} //ligne 16
Tout d'abord ton var_dump ne révèle rien d'anormal :J'ai enfin pu voir mes echo ou var_dump...
par contre en mettant un var_dump dans ton fichier de traitement, qui retourne une chaine au format JSON, pourrira la réponse et fera que le script appelant lèvera une erreur Invalid JSON.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 array(6) { ["name"]=> string(15) "stop-frelon.png" ["full_path"]=> string(15) "stop-frelon.png" ["type"]=> string(9) "image/png" ["tmp_name"]=> string(25) "C:\web\upload\php20FF.tmp" ["error"]=> int(0) ["size"]=> int(147008) }
Diriger les sorties vers un fichier de « debug », ce qui pourrait être fait de la sorte :Que me conseilles-tu ?
tu n'auras plus qu'à lire le fichier debug-tinymce-process-file.txt.
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 <?php $imageDirectory = "images/"; $acceptExt = explode(",", "bmp,gif,jfi,jfif,jif,jpe,jpeg,jpg,png,svg,webp"); reset($_FILES); $file = current($_FILES); //== Ajout DEBUG ==// $debugFile = "debug-" . pathinfo( $_SERVER['SCRIPT_FILENAME'], PATHINFO_FILENAME) . ".txt"; ob_start(); echo date("d-m-Y H:i") . PHP_EOL; print_r($file); $debug = ob_get_clean(); $fp = fopen($debugFile, "w"); fwrite($fp, $debug); fclose($fp); //===========// if (is_uploaded_file($file["tmp_name"])) { // test extension if (!in_array(strtolower(pathinfo($file['name'], PATHINFO_EXTENSION)), $acceptExt)) { header("HTTP/1.1 400 Invalid extension."); return; } // Déplace le fichier téléchargé $nomFile = $imageDirectory . $file["name"]; move_uploaded_file($file['tmp_name'], $nomFile); // réponse au format JSON echo json_encode(["location" => $nomFile]); }
Tu t'y connais sacrément bien car ça s'invente pas :
debug-tinymce-process-file.txt :
Code txt : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 01-10-2023 07:43 Array ( [name] => frelon_transparent.jpg [full_path] => frelon_transparent.jpg [type] => image/jpeg [tmp_name] => C:\web\upload\phpAE23.tmp [error] => 0 [size] => 34999 )
Je continue...
Ce que je souhaite (et ne sais pas faire), c'est récupérer le nom du fichier importé (ainsi je connaîtrais son URL vu que par exemple pour l'exemple du post précédent, ça serait en relatif images/frelon_transparent.jpg). Doit-on lire le fichier de debug tel que tu viens de me montrer ou y a plus simple ?
J'avoue, que depuis quelques posts, j'ai du mal à comprendre ce que tu cherches à faire
L'URL, en relatif (*), de l'image uploadée est prise en compte dans le code HTML géré par tinyMCE, tu l'a trouve dans le src de celle-ci. C'est la location que tu retournes via le fichier tinymce-process-file.php.
Après l'upload regarde le code généré par tinyMCE tu verras que l'attribut src est mis à jour.
Lorsque tu vas faire le traitement, pour mise en base du code HTML, cette URL est contenu de la même façon dans les src des images.
Je ne vois donc pas en quoi il t'es important de la connaitre et pour quel usage !?!
(*) Rien ne t'empêche de la mettre en absolue d'ailleurs dans le fichier tinymce-process-file.php.
Mon idée : l'utilisateur (admin du site) importe une image de son disque. L'image est donc uploadée dans le répertoire "images". Dorénavant, il est possible d'afficher celle-ci en connaissant son URL (que le site va enregistrer en bdd), donc il me faut bien connaître son URL...
traitement.php :
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 <?php session_start(); if (!isset($_POST['CeQueVousVoulez']) || empty ($_POST['CeQueVousVoulez'])) { echo "Aucune donnée disponible"; exit; } $imageDirectory = "images/"; $pattern = "/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/i"; $prefixImage = "data:image/"; $html = $_POST['CeQueVousVoulez']; preg_match_all($pattern, $html, $matches, PREG_SET_ORDER); $i=0; foreach ($matches as $match) { $i=$i+1; //$img = $match[0]; // contient la chaine complète, <img src="....> $src = $match[1]; // contient le contenu de src if ($i++==1){ //ds $src, il y a ttes les images stockées et on affiche que la première $url_img = $src; } $base64 = explode(";base64,", $src); // fichier image uniquement $accept = strpos($base64[0], $prefixImage) !== false; if ($accept && count($base64) > 1) { $ext = str_replace($prefixImage, ".", $base64[0]); // il serait bon de tester l'extension, attention à svg+xml $decoded = base64_decode($base64[1], true); $nomFile = $imageDirectory . uniqid("image-") . $ext; str_replace($src, $nomFile, $html); /*$size = file_put_contents($nomFile, $decoded); if($size){ $html = str_replace($src, $nomFile, $html); } else { echo "Une erreur c'est produite"; }*/ } } ?> <img src="<?=$url_img ?>"> <?php //echo $html; // pour mise à jour éventuelle côté client
Je ne comprends pas mieux, le code de ton fichier traitement.php servait à convertir et enregistrer en fichier les données des src sous la forme base64, ce qui n'est donc plus le cas.
Si tu veux récupérer les URL de tes images elles sont néanmoins disponibles dans la variables $src qu'il te suffit de mettre dans un tableau pour exploitation.... donc il me faut bien connaître son URL...
et en fin
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 $src = $match[1]; // contient le contenu de src $listSrcImage []= $src;
Code php : Sélectionner tout - Visualiser dans une fenêtre à part var_dump($listSrcImage);
Pour faire plus propre, mais sait-on jamais :
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 <?php if (!isset($_POST['texte']) || empty ($_POST['texte'])) { echo "Aucune donnée disponible"; exit; } $html = $_POST['texte']; // parse DOM $doc = new DOMDocument(); $doc->loadHTML($html); $images = $doc->getElementsByTagName("img"); foreach ($images as $img) { $listImgTag[] = htmlentities($img->ownerDocument->saveHTML($img)); $listSrcImg[] = $img->getAttribute("src"); } echo "<h2>HTML images</h2><pre>"; print_r($listImgTag); echo "</pre>"; echo "<h2>URL images</h2><pre>"; print_r($listSrcImg); echo "</pre>";
La raison est qu'initialement TinyMCE fournit les images dans ce format, mais ce que je souhaite récupérer est en fait l'URL de l'image.le code de ton fichier traitement.php servait à convertir et enregistrer en fichier les données des src sous la forme base64, ce qui n'est donc plus le cas.
sait-on jamais quoi ? Cela dit, grâce à toi, j'ai un code qui répond à mon besoin, donc pas motivé pour le modifier.Pour faire plus propre, mais sait-on jamais
simplement à toutes fins utiles j'ai ajouté cette version n'aillant pas franchement cerné ton soucis, qui donc est visiblement résolu !sait-on jamais quoi ?
Bonjour,
après une semaine d'indisponibilité, je reviens aux affaires...
Mon essai est effectivement réussi et terminé mais quand j'ai voulu l'appliquer au site sur lequel je souhaite l'utiliser, petit problème, donc pas encore
L'éditeur apparaît correctement ; si je ne saisis que du texte, c'est OK mais ce qui pose problème, c'est l'upload d'images.
Dans ce site, le "head" n'est pas à la même hauteur que le script contenant l'éditeur. Voici l'arborescence :
tinymce-process-file.php :view block admin images // répertoire ActuFormEdit.php //script qui contient l'éditeur tinymce-process-file.php LayoutActus.php //script contenant le head
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 <?php $imageDirectory = "block/admin/images/"; // j'ai aussi essayé images/ $acceptExt = explode(",", "bmp,gif,jfi,jfif,jif,jpe,jpeg,jpg,png,svg,webp"); reset($_FILES); $file = current($_FILES); if (is_uploaded_file($file["tmp_name"])) { // test extension if (!in_array(strtolower(pathinfo($file['name'], PATHINFO_EXTENSION)), $acceptExt)) { header("HTTP/1.1 400 Invalid extension."); return; } // Déplace le fichier téléchargé $nomFile = $imageDirectory . $file["name"]; move_uploaded_file($file['tmp_name'], $nomFile); // réponse au format JSON echo json_encode(["location" => $nomFile]); }
dans LayoutActus.php :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68 <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.0/tinymce.min.js"></script> <script> tinymce.init({ selector: 'textarea#file-picker', ui_mode: 'split', width:1500, height:500, statusbar: false, language_url: "block/admin/fr_FR/langs/fr_FR.js", // ici le chemin d'accès au fichier de traduction language : "fr_FR", plugins: 'image code', toolbar: 'undo redo | link image | code', /* enable title field in the Image dialog*/ image_title: true, /* enable automatic uploads of images represented by blob or data URIs*/ automatic_uploads: true, /* URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url) images_upload_url: 'postAcceptor.php', here we add custom filepicker only to Image dialog */ images_upload_url: "block/admin/tinymce-process-file.php", // le fichier d'upload file_picker_types: 'image', /* and here's our custom image picker*/ file_picker_callback: function (cb, value, meta) { var input = document.createElement('input'); input.setAttribute('type', 'file'); input.setAttribute('accept', 'image/*'); /* Note: In modern browsers input[type="file"] is functional without even adding it to the DOM, but that might not be the case in some older or quirky browsers like IE, so you might want to add it to the DOM just in case, and visually hide it. And do not forget do remove it once you do not need it anymore. */ input.onchange = function () { var file = this.files[0]; var reader = new FileReader(); reader.onload = function () { /* Note: Now we need to register the blob in TinyMCEs image blob registry. In the next release this part hopefully won't be necessary, as we are looking to handle it internally.*/ //var id = 'blobid' + (new Date()).getTime(); var id = file.name.split(".")[0]; // alert('head 50 filename='+file.name); // mettre ici le nom du fichier var blobCache = tinymce.activeEditor.editorUpload.blobCache; var base64 = reader.result.split(',')[1]; var blobInfo = blobCache.create(id, file, base64); //var blobInfo = blobCache.create(id); blobCache.add(blobInfo); /* call the callback and populate the Title field with the file name */ cb(blobInfo.blobUri(), { title: file.name }); }; reader.readAsDataURL(file); }; input.click(); }, content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }); </script>
Et quand j'uploade une image, dès que je fais "save", message d'erreur : Failed to upload image: HTTP Error: 404
Vois tu un problème ?
Pour info, j'utilise le moteur de rendu PHPEcho de rawsrc https://www.developpez.net/forums/bl...version-2-0-0/ ou https://github.com/rawsrc/PhpEcho et une architecture MVC, ce qui fait que tinymce-process-file.php serait plus à sa place dans le model que dans la view mais je doute que le souci vienne de là.
j'ai rajouté dans tinymce-process-file.php le debug tel que tu me l'avais montré au post #24 :
tinymce-process-file.php :
mais le fichier n'est pas créé...
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 <?php $imageDirectory = "block/admin/images/"; $acceptExt = explode(",", "bmp,gif,jfi,jfif,jif,jpe,jpeg,jpg,png,svg,webp"); reset($_FILES); $file = current($_FILES); //== Ajout DEBUG ==// $debugFile = "debug-" . pathinfo( $_SERVER['SCRIPT_FILENAME'], PATHINFO_FILENAME) . ".txt"; ob_start(); echo date("d-m-Y H:i") . PHP_EOL; print_r($file); $debug = ob_get_clean(); $fp = fopen($debugFile, "w"); fwrite($fp, $debug); fc!lose($fp); //===========// if (is_uploaded_file($file["tmp_name"])) { // test extension if (!in_array(strtolower(pathinfo($file['name'], PATHINFO_EXTENSION)), $acceptExt)) { header("HTTP/1.1 400 Invalid extension."); return; } // Déplace le fichier téléchargé $nomFile = $imageDirectory . $file["name"]; move_uploaded_file($file['tmp_name'], $nomFile); // réponse au format JSON echo json_encode(["location" => $nomFile]); }
J'ai fait un petit essai qui montre que la difficulté vient du fait que le head n'est pas dans le même répertoire que le script qui contient l'éditeur.
En effet, je suis revenu à mon essai qui fonctionne mais simplement, j'ai déplacé le fichier head.php (qui contient l'init de TinyMCE)
Et j'ai le même message d'erreur !
arborescence :
htmlsimple.php :dir_head head.php htmlsimple.php //script contenant l'éditeur tinymce-process-file.php images //répertoire
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 <!DOCTYPE html> <html> <?php include "dir_head/head.php" ?> <body> <form action="traitement.php" method="post"> <textarea name="CeQueVousVoulez" id="file-picker"></textarea> <input type="submit" value="envoyer2"> </form> </html>
head.php :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.0/tinymce.min.js"></script> <script> tinymce.init({ selector: 'textarea#file-picker', ui_mode: 'split', width:1500, height:500, statusbar: false, language_url: "../fr_FR/langs/fr_FR.js", // ici le chemin d'accès au fichier de traduction language : "fr_FR", plugins: 'image code', toolbar: 'undo redo | link image | code', /* enable title field in the Image dialog*/ image_title: true, /* enable automatic uploads of images represented by blob or data URIs*/ automatic_uploads: true, /* URL of our upload handler (for more details check: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url) images_upload_url: 'postAcceptor.php', here we add custom filepicker only to Image dialog */ images_upload_url: "../tinymce-process-file.php", // le fichier d'upload file_picker_types: 'image', /* and here's our custom image picker*/ file_picker_callback: function (cb, value, meta) { var input = document.createElement('input'); input.setAttribute('type', 'file'); input.setAttribute('accept', 'image/*'); /* Note: In modern browsers input[type="file"] is functional without even adding it to the DOM, but that might not be the case in some older or quirky browsers like IE, so you might want to add it to the DOM just in case, and visually hide it. And do not forget do remove it once you do not need it anymore. */ input.onchange = function () { var file = this.files[0]; var reader = new FileReader(); reader.onload = function () { /* Note: Now we need to register the blob in TinyMCEs image blob registry. In the next release this part hopefully won't be necessary, as we are looking to handle it internally.*/ var id = file.name.split(".")[0]; // mettre ici le nom du fichier var blobCache = tinymce.activeEditor.editorUpload.blobCache; var base64 = reader.result.split(',')[1]; var blobInfo = blobCache.create(id, file, base64); blobCache.add(blobInfo); /* call the callback and populate the Title field with the file name */ cb(blobInfo.blobUri(), { title: file.name }); }; reader.readAsDataURL(file); }; input.click(); }, content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }); </script> </head>
Et quand, j'uploade un fichier image, message d'erreur quand je fais "save" : Failed to upload image: HTTP Error: 404 (pareil qu'au post #32)
cela signifie simplement que le chemin au fichier de traitement , en l’occurrence tinymce-process-file.php, n'est pas correct.Et quand j'uploade une image, dès que je fais "save", message d'erreur : Failed to upload image: HTTP Error: 404
Vois tu un problème ?
C'est cette ligne qui visiblement te pose problème :
ou encore :
Code : Sélectionner tout - Visualiser dans une fenêtre à part images_upload_url: "block/admin/tinymce-process-file.php", // le fichier d'upload
Regarde le code source HTML généré pour réajuster le tir en fonction du chemin du fichier affiché dans la barre d'adresse ou passe en adresse absolue.
Code : Sélectionner tout - Visualiser dans une fenêtre à part images_upload_url: "../tinymce-process-file.php", // le fichier d'upload
Merci de m'avoir fait penser à l'adressage absolu.
J'ai d'abord voulu regarder le code html généré mais on ne voit pas tinymce-process-file.php (à part dans tinymce.init). Par contre, avec l'adressage absolu, mon essai fonctionne, mais pas dans le site final
images_upload_url: "http://dev.dvp.fr/tinymce/tinymce-process-file.php", // le fichier d'upload ou images_upload_url: "http://dev.arnaudpoo.fr/src/view/block/admin/tinymce-process-file.php", // le fichier d'upload.
Vu le message d'erreur, ça signifie que le fichier tinymce-process-file.php n'est pas trouvé, non ? Si oui, je pense qu'il faudrait qu'il soit trouvé par le routeur...mais je pressens un problème : tinymce.init n'accepte que du html et le routeur est codé en PHP...
c'est tout à fait cela, il te faut juste revoir la façon dont sont appelés les fichiers.Vu le message d'erreur, ça signifie que le fichier tinymce-process-file.php n'est pas trouvé, non ?
J'ai l'impression que tu te fais des nœuds au cerveau.Si oui, je pense qu'il faudrait qu'il soit trouvé par le routeur...mais je pressens un problème : tinymce.init n'accepte que du html et le routeur est codé en PHP...
Ce qui m'a fait penser au routeur, c'est que si je rentre dans le navigateur l'URL http://dev.arnaudpoo.fr/src/view/block/admin/tinymce-process-file.php (qui est l'adresse indiquée dans tinymce.init (images_upload_url: "http://dev.arnaudpoo.fr/src/view/block/admin/tinymce-process-file.php", // le fichier d'upload)), on obtient l'affichage Cette page n'existe pas..
Or voici le routeur :
donc si la route n'est pas trouvée, on appelle le contrôleur Error404 et quand on appelle celui-ci, on finit par appeler la vue error.404.php que voici :
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 <?php declare(strict_types=1); function getController(string $path): string { // une route ne doit renvoyer qu'un controller et absolument rien d'autre // attention tout est sensible à la casse !!! majuscule != minuscule $routes = [ '' => \PasDePanique\controller\Accueil::class, '404' => \PasDePanique\controller\Error404::class, 'cgv' => \PasDePanique\controller\CGV::class, // etc ]; $parts = explode('/', $path); return $routes[$parts[0]] ?? $routes['404']; ?> }
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <section> <article> <p>Cette page n'existe pas.</p> </article> </section>
Ils sont appelés par le routeur et celui-ci ne manipule que des classes et dans index.php :il te faut juste revoir la façon dont sont appelés les fichiers.
Les classes comportent toutes une méthode invoke et dans la majorité des cas $url_data vaut []
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 include 'config/routing.php'; $ctrl_name = getController($path); // $parts[1] contient le nom d'une zone d'intervention (si défini) $url_data = isset($parts[1]) ? [$parts[1]] : []; $ctrl = new $ctrl_name(); $ctrl->invoke($url_data);
Si tu passes par un router il te faut définir dans celui-ci une règle de routage pour ton fichier de traitement, au même titre que tout tes autres appels, qui dirigera vers le contrôleur qui va bien pour cette action, (enfin il semble me souvenir).
On est quand même bien loin d'un problème de JavaScript maintenant![]()
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager