mise a jour categorie (liste deroulante et remplissage obligatoire) + mise a jour checkbox + insertion de TinyMCE (pas finis)

blog/html/ajouter_article.html

@@ -100,18 +100,19 @@
     <div id="successMsg" class="alert alert-success d-none">Article ajouté avec succès !</div>
 
         <!-- Catégorie -->
-<div class="mb-3">
-    <label class="form-label fw-bold">Catégorie de l'article</label>
-    <input list="categories" id="articleCategory" class="form-control" placeholder="Entrez une catégorie">
-
-    <datalist id="categories">
-        <option value="actualités">
-        <option value="chien">
-        <option value="chat">
-        <option value="boutique">
-    </datalist>
+    <div class="mb-3">
+    <label class="form-label fw-bold">Catégorie de l'article (obligatoire)</label>
+    <select id="articleCategory" class="form-select" required>
+        <option value="" disabled selected>Choisissez une catégorie</option>
+        <option value="actualités">Actualités</option>
+        <option value="chien">Chien</option>
+        <option value="chat">Chat</option>
+        <option value="boutique">Boutique</option>
+    </select>
 </div>
 
+
+
 <!-- Titre -->
 <div class="mb-4">
     <label class="form-label fw-bold">Titre de l'article (obligatoire)</label>
@@ -137,7 +138,7 @@
         <!--Publié-->
         <div class="form-check mb-3">
         <input class="form-check-input" type="checkbox" id="articlePublished">
-        <label class="form-check-label" for="articlePublished">Publié (sera publié sur le blog)</label>
+        <label class="form-check-label" for="articlePublished">Publié (sera publié sur le facebook)</label>
         </div>
 
 
@@ -152,25 +153,40 @@
 
 <script src="../js/ajouter_article.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-<script>
-  
-ClassicEditor
+<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
+
+  <script>
+tinymce.init({
+    selector: '#articleContent',
+    height: 400,
+    language: 'fr',
+    plugins: 'lists fullscreen',
+    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen'
+});
+</script>
+
+
+
+
+
+
+
+    
+</body>
+</html>
+
+
+
+<!--ClassicEditor
   .create(document.querySelector('#articleContent'), {
     language: 'fr',
     toolbar: [
       'heading',
-      'bold', 'italic', 'underline',
+      'bold', 'italic', 
       'bulletedList', 'numberedList',
       'undo', 'redo'
     ]
   })
   .catch(error => {
     console.error(error);
-  });
-
-
-
-</script>
-    
-</body>
-</html>
+  });

blog/js/ajouter_article.js

@@ -1,7 +1,6 @@
 const form = document.getElementById('ajouterArticleForm');
 const imgField = document.getElementById('articleImage');
 const titleField = document.getElementById('articleTitle');
-const contentField = document.getElementById('articleContent');
 const categoryField = document.getElementById('articleCategory');
 const publishedField = document.getElementById('articlePublished');
 
@@ -18,6 +17,8 @@ form.addEventListener('submit', function(e) {
 
     const titre = titleField.value.trim().toLowerCase();
     const fichierImage = imgField.files[0];
+    const contenu = tinymce.get("articleContent").getContent();  // ← CORRECTION IMPORTANTE
+    const categorie = categoryField.value;
 
     // Reset messages
     errorEmpty.classList.add('d-none');
@@ -25,8 +26,16 @@ form.addEventListener('submit', function(e) {
     errorExists.classList.add('d-none');
     successMsg.classList.add('d-none');
 
+    // Catégorie obligatoire
+    if (categorie === "") {
+        errorEmpty.textContent = "Veuillez choisir une catégorie.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
     // Titre obligatoire
     if (titre === "") {
+        errorEmpty.textContent = "Le titre de l'article est obligatoire.";
         errorEmpty.classList.remove('d-none');
         return;
     }
@@ -37,6 +46,13 @@ form.addEventListener('submit', function(e) {
         return;
     }
 
+    // Contenu obligatoire
+    if (contenu.trim() === "") {
+        errorEmpty.textContent = "Le contenu de l'article ne peut pas être vide.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
     // Image invalide
     if (fichierImage) {
         const validFormats = ['image/jpeg', 'image/png'];
@@ -52,8 +68,17 @@ form.addEventListener('submit', function(e) {
     // Succès
     successMsg.classList.remove('d-none');
 
-    // Redirection après 1 seconde
+    // Redirection
     setTimeout(() => {
         window.location.href = "../html/liste_categorie_article.html";
     }, 1000);
 });
+
+// TinyMCE
+tinymce.init({
+    selector: '#articleContent',
+    height: 400,
+    language: 'fr',
+    plugins: 'lists fullscreen',
+    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen',
+});