diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | public/index.php | 87 |
2 files changed, 57 insertions, 31 deletions
| @@ -1 +1,2 @@ | |||
| 1 | vendor/ | ||
| 1 | node_modules/ \ No newline at end of file | 2 | node_modules/ \ No newline at end of file |
diff --git a/public/index.php b/public/index.php index 69f335c..81a0408 100644 --- a/public/index.php +++ b/public/index.php | |||
| @@ -19,7 +19,29 @@ if(isset($_GET['action']) && $_GET['action'] == 'editor_submit'){ | |||
| 19 | die; | 19 | die; |
| 20 | } | 20 | } |
| 21 | elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ | 21 | elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ |
| 22 | echo "hello"; | 22 | if (isset($_FILES['file'])) { |
| 23 | $file = $_FILES['file']; | ||
| 24 | $dest = 'images/'; | ||
| 25 | |||
| 26 | // Vérifier si le répertoire existe, sinon le créer | ||
| 27 | if(!is_dir($dest)) { | ||
| 28 | mkdir($dest, 0777, true); | ||
| 29 | } | ||
| 30 | |||
| 31 | $filePath = $dest . basename($file['name']); | ||
| 32 | if(move_uploaded_file($file['tmp_name'], $filePath)) { | ||
| 33 | // Répondre avec l'URL de l'image téléchargée | ||
| 34 | echo json_encode(['location' => '/' . $filePath]); | ||
| 35 | } | ||
| 36 | else{ | ||
| 37 | http_response_code(500); | ||
| 38 | echo json_encode(['message' => 'Erreur 500: Internal Server Error']); | ||
| 39 | } | ||
| 40 | } | ||
| 41 | else{ | ||
| 42 | http_response_code(400); | ||
| 43 | echo json_encode(['message' => 'Erreur 400: Bad Request']); | ||
| 44 | } | ||
| 23 | die; | 45 | die; |
| 24 | } | 46 | } |
| 25 | ?> | 47 | ?> |
| @@ -52,45 +74,52 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ | |||
| 52 | language: 'fr_FR', // télécharger le paquet correspondant ici: https://www.tiny.cloud/get-tiny/language-packages/ | 74 | language: 'fr_FR', // télécharger le paquet correspondant ici: https://www.tiny.cloud/get-tiny/language-packages/ |
| 53 | license_key: 'gpl', | 75 | license_key: 'gpl', |
| 54 | branding: false, | 76 | branding: false, |
| 55 | plugins: 'image code', // Activer le plugin d'image | 77 | plugins: 'lists advlist link autolink table image media autoresize help', |
| 56 | toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | image code', | 78 | toolbar: 'undo redo print | styles | bold italic underline strikethrough | align outdent indent | numlist bullist | link table image media | help', |
| 57 | setup: function (editor) { | 79 | setup: function (editor) { |
| 58 | editor.on('init', function () { | 80 | editor.on('init', function () { |
| 59 | editors[articleId] = editor; | 81 | editors[articleId] = editor; |
| 60 | 82 | ||
| 61 | // Masquer le bouton "Modifier" et afficher les boutons "Annuler" et "Soumettre" | 83 | // Masquer le bouton "Modifier" et afficher les boutons "Annuler" et "Soumettre" |
| 62 | document.querySelector(`#edit-${articleId}`).classList.add('hidden'); | 84 | document.querySelector(`#edit-${articleId}`).classList.add('hidden'); |
| 85 | document.querySelector(`#delete-${articleId}`).classList.add('hidden'); | ||
| 63 | document.querySelector(`#cancel-${articleId}`).classList.remove('hidden'); | 86 | document.querySelector(`#cancel-${articleId}`).classList.remove('hidden'); |
| 64 | document.querySelector(`#submit-${articleId}`).classList.remove('hidden'); | 87 | document.querySelector(`#submit-${articleId}`).classList.remove('hidden'); |
| 65 | }); | 88 | }); |
| 66 | }, | 89 | }, |
| 67 | // upload d'image | 90 | // upload d'image |
| 68 | images_upload_handler: function (blobInfo, success, failure) { | 91 | images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => { |
| 69 | const xhr = new XMLHttpRequest(); | 92 | const formData = new FormData(); |
| 70 | xhr.withCredentials = false; | 93 | formData.append("file", blobInfo.blob()); |
| 71 | xhr.open('POST', 'index.php?action=upload_image'); | ||
| 72 | |||
| 73 | xhr.onload = function() { | ||
| 74 | const json = JSON.parse(xhr.responseText); | ||
| 75 | 94 | ||
| 76 | if (xhr.status < 200 || xhr.status >= 300) { | 95 | fetch("index.php?action=upload_image", { |
| 77 | failure('HTTP Error: ' + xhr.status); | 96 | method: "POST", |
| 78 | return; | 97 | body: formData |
| 98 | }) | ||
| 99 | .then(response => response.json()) | ||
| 100 | .then(data => { | ||
| 101 | if (data.location) { | ||
| 102 | resolve(data.location); | ||
| 79 | } | 103 | } |
| 80 | 104 | else { | |
| 81 | success(json.location); | 105 | reject("Erreur: Chemin d'image invalide"); |
| 82 | }; | 106 | } |
| 83 | 107 | }) | |
| 84 | const formData = new FormData(); | 108 | .catch(error => { |
| 85 | formData.append('file', blobInfo.blob(), blobInfo.filename()); | 109 | reject("Erreur lors de l'upload"); |
| 86 | xhr.send(formData); | 110 | }); |
| 87 | } | 111 | }) |
| 88 | }); | 112 | }); |
| 89 | 113 | ||
| 90 | // Remplacer le contenu de l'article par l'éditeur | 114 | // Remplacer le contenu de l'article par l'éditeur |
| 91 | document.getElementById(articleId).innerHTML = articleContent; | 115 | document.getElementById(articleId).innerHTML = articleContent; |
| 92 | } | 116 | } |
| 93 | 117 | ||
| 118 | function deleteArticle(articleId) { | ||
| 119 | console.log("suppression"); | ||
| 120 | // code similaire à submitArticle() | ||
| 121 | } | ||
| 122 | |||
| 94 | function closeEditor(articleId) { | 123 | function closeEditor(articleId) { |
| 95 | // Récupérer le contenu d'origine de l'article | 124 | // Récupérer le contenu d'origine de l'article |
| 96 | const originalContent = document.getElementById(articleId).getAttribute('data-original-content'); | 125 | const originalContent = document.getElementById(articleId).getAttribute('data-original-content'); |
| @@ -104,6 +133,7 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ | |||
| 104 | 133 | ||
| 105 | // Afficher le bouton "Modifier" et masquer les boutons "Annuler" et "Soumettre" | 134 | // Afficher le bouton "Modifier" et masquer les boutons "Annuler" et "Soumettre" |
| 106 | document.querySelector(`#edit-${articleId}`).classList.remove('hidden'); | 135 | document.querySelector(`#edit-${articleId}`).classList.remove('hidden'); |
| 136 | document.querySelector(`#delete-${articleId}`).classList.remove('hidden'); | ||
| 107 | document.querySelector(`#cancel-${articleId}`).classList.add('hidden'); | 137 | document.querySelector(`#cancel-${articleId}`).classList.add('hidden'); |
| 108 | document.querySelector(`#submit-${articleId}`).classList.add('hidden'); | 138 | document.querySelector(`#submit-${articleId}`).classList.add('hidden'); |
| 109 | } | 139 | } |
| @@ -118,15 +148,8 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ | |||
| 118 | 148 | ||
| 119 | // Récupérer le contenu de l'éditeur | 149 | // Récupérer le contenu de l'éditeur |
| 120 | const newContent = editor.getContent(); | 150 | const newContent = editor.getContent(); |
| 121 | |||
| 122 | // test sans envoi au serveur | ||
| 123 | //~ closeEditor(articleId); | ||
| 124 | //~ document.getElementById(articleId).innerHTML = newContent; | ||
| 125 | //~ console.log(newContent); | ||
| 126 | |||
| 127 | 151 | ||
| 128 | // Envoyer le contenu au serveur via AJAX | 152 | // Envoi AJAX au serveur |
| 129 | //fetch('/save-article', { | ||
| 130 | fetch('index.php?action=editor_submit', { | 153 | fetch('index.php?action=editor_submit', { |
| 131 | method: 'POST', | 154 | method: 'POST', |
| 132 | headers: { | 155 | headers: { |
| @@ -161,8 +184,9 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ | |||
| 161 | <p>Contenu de l'article 1.</p> | 184 | <p>Contenu de l'article 1.</p> |
| 162 | </div> | 185 | </div> |
| 163 | <button id="edit-article-1" onclick="openEditor('article-1')">Modifier</button> | 186 | <button id="edit-article-1" onclick="openEditor('article-1')">Modifier</button> |
| 187 | <button id="delete-article-1" onclick="deleteArticle('article-1')">Supprimer</button> | ||
| 164 | <button id="cancel-article-1" class="hidden" onclick="closeEditor('article-1')">Annuler</button> | 188 | <button id="cancel-article-1" class="hidden" onclick="closeEditor('article-1')">Annuler</button> |
| 165 | <button id="submit-article-1" class="hidden" onclick="submitArticle('article-1')">Soumettre</button> | 189 | <button id="submit-article-1" class="hidden" onclick="submitArticle('article-1')">Valider</button> |
| 166 | </div> | 190 | </div> |
| 167 | 191 | ||
| 168 | <div> | 192 | <div> |
| @@ -171,8 +195,9 @@ elseif(isset($_GET['action']) && $_GET['action'] == 'upload_image'){ | |||
| 171 | <p>Contenu de l'article 2.</p> | 195 | <p>Contenu de l'article 2.</p> |
| 172 | </div> | 196 | </div> |
| 173 | <button id="edit-article-2" onclick="openEditor('article-2')">Modifier</button> | 197 | <button id="edit-article-2" onclick="openEditor('article-2')">Modifier</button> |
| 198 | <button id="delete-article-2" onclick="deleteArticle('article-2')">Supprimer</button> | ||
| 174 | <button id="cancel-article-2" class="hidden" onclick="closeEditor('article-2')">Annuler</button> | 199 | <button id="cancel-article-2" class="hidden" onclick="closeEditor('article-2')">Annuler</button> |
| 175 | <button id="submit-article-2" class="hidden" onclick="submitArticle('article-2')">Soumettre</button> | 200 | <button id="submit-article-2" class="hidden" onclick="submitArticle('article-2')">Valider</button> |
| 176 | </div> | 201 | </div> |
| 177 | </body> | 202 | </body> |
| 178 | </html> | 203 | </html> |
