Bonjour,
je crée une interface permettant à l'utilisateur de saisir des actualités. Je m'intéresse à TinyMCE pour lui fournir un éditeur style Word, lui permettant de saisir du texte et d'insérer des images. C'est cette partie qui me pose problème. Actuellement, j'ai un script qui permet de saisir du texte et importer des images prises sur le disque dur.
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
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
 
<head>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.0/tinymce.min.js"></script>
 
    <script>
        tinymce.init({
            selector: 'textarea#file-picker',
            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
            */
            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 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>
 
<body>
<form action="traitement.php" method="post">
 
    <textarea name="CeQueVousVoulez" id="file-picker"></textarea>
 
 
    <input type="submit" value="envoyer">
</form>
</body>
</html>
L'idée serait de déposer les images dans un répertoire sur le serveur et d'en stocker l'URL en bdd.

Pour voir ce que je récupère actuellement, j'ai mis ce code dans traitement.php (l'action du formulaire) :
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
<?php
var_dump($_POST);
et je m'aperçois que l'image importée est présente "en dur" :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
array(1) {
  ["CeQueVousVoulez"]=>
  string(196139) "<p>blabla</p>
<p>&nbsp;</p>
<p><img title="stop-frelon.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAF7CAYAAACKBm8GAAAAxHpUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHjabVBbEsMgCPznFD2CPFQ8jmnsTG/Q4xcDmYltyLi7glkRGJ/3Cx4zCAUkVy2tlGQhTRp1E5o8+oGY5EBPjVC45qFuIcmYjdkLWpzxzMcPJ2M3lS9G+ozCthaaOJP+GJETz46m3sOohRGTFzAMuj8rlab1+oRtpDXUF0wQXdv.../+gxxtVFQ1oAVYBHUA1EGxtbQ20traGKioqAn6/3zQMwxBCSKWUU83h4ODg8AFHCKEA27IsK5FIpOfn55M9PT0zhw8fnpubm5sn64t7ATgCHAeGbug8N3GN0jRNTSnlymQyxVLKFo/Hs8Tr9TZ6PJ4KXdfzhBB+wK2U0pyP1MHBweFDIV5pIGrb9nw6nZ6OxWKXI5FIdzqdPgtc1DRtHkin02kbuCFj2/8fmtGaTQ7QlPIAAAAASUVORK5CYII=" alt="" width="430" height="379"></p>"
}
Comment puis-je faire SVP ?