From 4b21b40292de8ee08220ab901651a13ec5e35199 Mon Sep 17 00:00:00 2001
From: polo <ordipolo@gmx.fr>
Date: Wed, 22 Jan 2025 23:45:52 +0100
Subject: gestion des $page, $from et $id

---
 data/page/html/1646148841.html            |   1 +
 data/page/html/article.html               |   1 -
 index.php                                 |  26 +++++---
 installation dans une application PHP.txt |  45 +++++++------
 src/integration/ckeditor5/CKEditor.php    | 101 +++++++++++++++++++++++-------
 src/integration/ckeditor5/view.php        |  14 ++++-
 src/view/templates/page.php               |   4 +-
 7 files changed, 130 insertions(+), 62 deletions(-)
 create mode 100644 data/page/html/1646148841.html
 delete mode 100644 data/page/html/article.html

diff --git a/data/page/html/1646148841.html b/data/page/html/1646148841.html
new file mode 100644
index 0000000..3f0058d
--- /dev/null
+++ b/data/page/html/1646148841.html
@@ -0,0 +1 @@
+<figure class="image image-style-side"><img src="data/page/images/chirurgien jaune.jpg" alt="image" /><figcaption>image</figcaption></figure><h2>hello</h2><figure class="table"><table><tbody><tr><td>ok</td><td>ah oui</td><td>bon</td></tr><tr><td><p>c'est pas</p><p>grave</p></td><td><p>on verra</p><p>plus tard</p></td><td>salut</td></tr></tbody></table></figure><p><i><mark class="marker-green">goodbye</mark></i></p>
\ No newline at end of file
diff --git a/data/page/html/article.html b/data/page/html/article.html
deleted file mode 100644
index 3f0058d..0000000
--- a/data/page/html/article.html
+++ /dev/null
@@ -1 +0,0 @@
-<figure class="image image-style-side"><img src="data/page/images/chirurgien jaune.jpg" alt="image" /><figcaption>image</figcaption></figure><h2>hello</h2><figure class="table"><table><tbody><tr><td>ok</td><td>ah oui</td><td>bon</td></tr><tr><td><p>c'est pas</p><p>grave</p></td><td><p>on verra</p><p>plus tard</p></td><td>salut</td></tr></tbody></table></figure><p><i><mark class="marker-green">goodbye</mark></i></p>
\ No newline at end of file
diff --git a/index.php b/index.php
index e02d3d1..f388081 100644
--- a/index.php
+++ b/index.php
@@ -1,22 +1,31 @@
 <?php
 // index.php
 
+// code de l'appli principale
+$page = isset($_GET['page']) ? $_GET['page'] : 'accueil';
+$from = isset($_GET['from']) ? $_GET['from'] : 'accueil'; // pour revenir au même endroit après un submit
+$id_article = isset($_GET['id']) ? $_GET['id'] : ''; // page pouvant avoir plusieurs articles
+
 
 require 'src/integration/ckeditor5/CKEditor.php';
 $ckeditor = new CKEditor();
+$ckeditor->setStorageMode('files');
+$ckeditor->setPage($page);
 
 
 // routage
 
 // upload images AJAX
-if(isset($_GET['action']) && $_GET['action'] === 'upload_image')
+if(isset($_GET['action']) && $_GET['action'] === 'upload_image_editor')
 {
     $ckeditor->checkAjaxReqest();
 }
 
 // submit normal
-if(isset($_GET['action']) && $_GET['action'] === 'submit') // HTML envoyé par l'éditeur
+if(isset($_GET['action']) && $_GET['action'] === 'submit_editor') // HTML envoyé par l'éditeur
 {
+    $ckeditor->setFrom($from);
+    $ckeditor->setIdArticle($id_article);
     $ckeditor->checkSubmitPOST();
 }
 
@@ -25,25 +34,26 @@ foreach($articles as $article)
 {}*/
 
 // ouvrir l'éditeur
-if(isset($_GET['action']) && $_GET['action'] === 'editor')
+if(isset($_GET['action']) && $_GET['action'] === 'open_editor')
 {
+    $ckeditor->setIdArticle($id_article);
     $editeurHTML = $ckeditor->openEditor();
 }
 else // affichage article
 {
-    if($ckeditor->storage === 'database')
+    $ckeditor->setIdArticle('1646148841');
+    if($ckeditor->getStorageMode() === 'database')
     {
         // ton code
     }
-    elseif($ckeditor->storage === 'files')
+    elseif($ckeditor->getStorageMode() === 'files')
     {
-        $texte = file_get_contents($ckeditor->data_path . '/html/' . $ckeditor->nom_article . '.html');
+        $texte = file_get_contents($ckeditor->getDataPath() . '/html/' . $ckeditor->getIdArticle() . '.html');
         //$texte = trim(addcslashes($texte, "'")); // échappe seulement les simples quotes
         $texte = trim($texte);
     }
-    
     $editeurHTML = '<div class="conteneur_article" >' . $texte . '</div>
-        <p><a href="' . $ckeditor->open_editor_link . '">ouvrir l\'éditeur</a></p>';
+        <p><a href="index.php?page=' . $ckeditor->getPage() . '&action=open_editor&id=' . $ckeditor->getIdArticle() . '">ouvrir l\'éditeur</a></p>';
 }
 
 require 'src/view/templates/page.php';
diff --git a/installation dans une application PHP.txt b/installation dans une application PHP.txt
index 21d1b0b..6d1b108 100644
--- a/installation dans une application PHP.txt	
+++ b/installation dans une application PHP.txt	
@@ -11,17 +11,15 @@ faire un install (npm) et un require (composer) dans son projet, obtenir la dern
 npm install ckeditor5
 composer require htmlawed/htmlawed
 
-les 11 fichiers récupérés par le git clone:
-lib/ckeditor5/create.php
-lib/ckeditor5/clean_html.php
-lib/ckeditor5/view.php
-lib/ckeditor5/image_upload.php
-lib/ckeditor5/articles_hors_editeur.css
-config.php
+les 9 fichiers récupérés par le git clone
+src/integration/ckeditor5/CKEditor.php
+src/integration/ckeditor5/view.php
+src/integration/ckeditor5/image_upload.php
+src/integration/ckeditor5/articles_hors_editeur.css
 installation dans une application PHP.txt
 index.php                           (appel des contrôleurs)
 src/templates/page.php              (HTML principal de la page web)
-data/page/html/articles.html
+data/page/html/1646148841.html
 data/page/images/chirurgien jaune.jpg
 
 
@@ -31,7 +29,8 @@ gràce à un lien symbolique, le programme s'attend à trouver un dossier "trans
 
 PHP l'ajoute avec symlink dans index.php
 si le lien symbolique /srv/http/ckeditor5/node_modules/ckeditor5/dist/browser/translations
-n'a pas été créé correctement par PHP, donner serveur les droits en écriture ou le faire en BASH
+n'a pas été créé correctement par PHP, permettre au serveur d'écrire dans "browser" ou le faire en BASH
+la commande mklink permet de faire la même chose sur un serveur windows, l'option /J créée une jointure et fonctionne sans droit d'admin
 
 chemin absolu
 ln -s /var/www/ckeditor5/node_modules/ckeditor5/dist/translations /var/www/ckeditor5/node_modules/ckeditor5/dist/browser/
@@ -40,39 +39,37 @@ ln -s ../translations node_modules/ckeditor5/dist/browser/
 
 
 3/ essai
-les paramètres dans config.php et les fichiers dans data permettent normalement
+les paramètres dans CKEditor.php et les fichiers dans data permettent normalement
 - d'ouvrir l'éditeur
 - de lire des données dans des fichiers et de les insérer dans l'éditeur pour modification
 
 la sortie au "submit" est nettoyée puis se retrouve dans $html_from_editor
 
 
-3/ intégration à un projet
+4/ intégration à un projet
 
 a) index.php et src/templates/page.php sont à remplacer en fonction de notre application
-regarder à l'intérieur et adapter son propre code
 
-b) config.php est à personnaliser et/ou à copier ailleurs,
-du moment que les variables à l'intérieur restent disponibles
+b) adapter les paramètres dans CKEditor.php, $storage_mode vaut soit 'files' soit 'database'
 
 c) le dossier data et ses sous-dossiers ont besoin de droits en écriture
 
-a) adapter le routeur dans index.php
+d) adapter le routeur dans index.php
 
-b) adapter ce qui suit "// modèle" dans index.php et lib/ckeditor5/create.php pour obtenir les données souhaitées (BDD, fichiers)
+e) adapter la connexion à la BDD si nécéssaire
 
-c) adapter le fichier config.php (vérifier les chemins)
-
-d) ajouter <?= $css_editeur ?> dans le <head>
-ajouter aussi <?= $contenu ?> dans le <body> pour afficher l'éditeur ou du HTML créé par l'éditeur
-
-e) insérer dans chaque page affichant des données créées avec l'éditeur:
-<link rel="stylesheet" href="lib/ckeditor5/article_hors_editeur.css" />
+f) insérer dans chaque page affichant des données créées avec l'éditeur:
+<?= $ckeditor->getCSSOutsideEditorTag() ?>
 l'éditeur ne génère pas de CSS mais seulement du HTML basique, ce CSS imite le rendu à l'intérieur de l'éditeur
 
-normalement c'est bon fini, ce qui suit est de l'information utile si on souhaite partir de zéro avec NPM et la doc
+g) ajouter dans chaque page insérant l'éditeur:
+<?= $ckeditor->getCSSEditorTag() ?>
+
+h) insérer <?= $editeurHTML ?> dans toutes les pages,
+quand l'éditeur n'est pas ouvert, ça fait apparaître un lien pour l'ouvrir
 
 
+ce qui suit est de l'information utile si on souhaite partir de zéro avec NPM et la doc
 
 
 
diff --git a/src/integration/ckeditor5/CKEditor.php b/src/integration/ckeditor5/CKEditor.php
index f3a60e0..6f630c8 100644
--- a/src/integration/ckeditor5/CKEditor.php
+++ b/src/integration/ckeditor5/CKEditor.php
@@ -1,41 +1,94 @@
 <?php
+// src/integration/ckeditor5/CKEditor.php
+
 class CKEditor
 {
 	public const string INTEGRATION_PATH = 'src/integration/ckeditor5/';
-	private string $from = 'index.php';
-	public string $open_editor_link = 'index.php?action=editor';
-	private string $form_action_file = 'index.php?action=submit';
-	private string $upload_ajax_url = 'index.php?action=upload_image';
-	private string $php_ini_max_size;
-	public string $css_editor_tag = '';
-	public string $css_outside_editor_tag;
-	private string $toolbar_language = 'fr';
-	public string $storage = 'files';
-	public string $data_path = 'data/page';
-	public string $nom_article = "article";
 
-	private string $server_root;
+	//public const string SERVER_PATH = '/';
+	private const string SERVER_PATH = '/ckeditor5/';
+	private string $server_root; // pour les "imports" en javascript
 	// pour l'importmap: j'ai modifié la version "installation avec CDN de la doc pour utiliser les fichiers locaux
 	// l'"importmap" permet d'utiliser "import" (ça ressemble pas mal au python) dans le navigateur comme n'importe quel langage de programmation normal
 
+	private string $storage_mode = 'files';
+	private string $page = 'accueil';
+	private string $from = '';
+	private string $id_article = '';
+
+	private string $php_ini_max_size;
+	private string $css_editor_tag = '';
+	private string $css_outside_editor_tag = '';
+	private string $toolbar_language = 'fr';
+	private string $data_path = 'data/page';
+
 
 	public function __construct()
 	{
 		$this->makeTranslationSymLink();
-		$this->from .= isset($_GET['from']) ? '?page=' . $_GET['from'] : '';
+
 		$this->php_ini_max_size = $this->returnBytes(ini_get('upload_max_filesize')); // = 2M par défaut dans le php.ini
 		$this->css_outside_editor_tag = '<link rel="stylesheet" href="' . self::INTEGRATION_PATH . 'article_hors_editeur.css" />';
-		$this->server_root = $_SERVER['SERVER_NAME'] . '/ckeditor5/';
+		$this->server_root = $_SERVER['SERVER_NAME'] . self::SERVER_PATH;
 	}
 
-	public function checkAjaxReqest()
+	// getters
+	public function getPage(): string
+	{
+		return $this->page;
+	}
+	public function getFrom(): string
+	{
+		return $this->from;
+	}
+	public function getIdArticle(): string
+	{
+		return $this->id_article;
+	}
+	public function getDataPath(): string
+	{
+		return $this->data_path;
+	}
+	public function getCSSOutsideEditorTag(): string
+	{
+		return $this->css_outside_editor_tag;
+	}
+	public function getCSSEditorTag(): string
+	{
+		return $this->css_editor_tag;
+	}
+	public function getStorageMode(): string
+	{
+		return $this->storage_mode;
+	}
+
+	// setters
+	public function setPage(string $page): void
+	{
+		$this->page = $page;
+	}
+	public function setFrom(string $from): void
+	{
+		$this->from = $from;
+	}
+	public function setIdArticle(string $id_article): void
+	{
+		$this->id_article = $id_article;
+	}
+	public function setStorageMode($mode): void
+	{
+		$this->storage_mode = $mode;
+	}
+
+	public function checkAjaxReqest(): void
 	{
 		// dans un fichier à part parce que trop de lignes
 		require self::INTEGRATION_PATH . 'image_upload.php';
 		die;
 	}
 
-	public function checkSubmitPOST()
+
+	public function checkSubmitPOST(): void
 	{
 		$html_from_editor = $this->getAndCleanEditorOutput($_POST["contenu"]); // manipule $_POST['contenu'];
 
@@ -47,18 +100,18 @@ class CKEditor
 		die;
 	}
 
-	public function openEditor()
+	public function openEditor(): string
 	{
 		// version "minifiée"
 		$this->css_editor_tag = '<link rel="stylesheet" href="node_modules/ckeditor5/dist/browser/ckeditor5.css" />';
 		// version normale aérée et commentée"
 		$this->css_editor_tag = '<link rel="stylesheet" href="node_modules/ckeditor5/dist/ckeditor5.css" />';
 
-		if($this->storage === 'database')
+		if($this->getStorageMode() === 'database')
 		{}
-		elseif($this->storage === 'files')
+		elseif($this->getStorageMode() === 'files')
 		{
-		    $texte = file_get_contents($this->data_path . '/html/' . $this->nom_article . '.html');
+		    $texte = file_get_contents($this->data_path . '/html/' . $this->id_article . '.html');
 
 		    $texte = trim(addcslashes($texte, "'")); // échapper les simples quotes pour javascript
 		    //$texte = trim(addslashes($texte)); // échappe ', ", \ et NULL, je sais pas si c'est bien
@@ -99,9 +152,9 @@ class CKEditor
 
 	// conversion des 2M du php.ini en 2000000
 	// note: les kibi, mébi et gibi sont inutiles ici
-	private function returnBytes($size_str) // chaine du style '2M'
+	private function returnBytes(string $size_str): int // chaine du style '2M'
 	{
-	    switch (substr ($size_str, -1))
+	    switch(substr($size_str, -1))
 	    {
 	        case 'Ki': case 'ki': return (int)$size_str * 1024;
 	        case 'Mi': case 'mi': return (int)$size_str * 1048576;
@@ -109,7 +162,7 @@ class CKEditor
 	        case 'K': case 'k': return (int)$size_str * 1000;
 	        case 'M': case 'm': return (int)$size_str * 1000000;
 	        case 'G': case 'g': return (int)$size_str * 1000000000;
-	        default: return $size_str;
+	        default: return (int)$size_str;
 	    }
 	}
 
@@ -150,4 +203,4 @@ class CKEditor
 	    fclose($fichier);
 	    chmod('data/' . $page . '/' . $nom_fichier, 0666);
 	}
-}
\ No newline at end of file
+}
diff --git a/src/integration/ckeditor5/view.php b/src/integration/ckeditor5/view.php
index ed1d0f7..bb1f6a2 100644
--- a/src/integration/ckeditor5/view.php
+++ b/src/integration/ckeditor5/view.php
@@ -1,13 +1,21 @@
 <?php
 // src/integration/ckeditor5/view.php
 
+$submit_action = 'index.php?from=' . $this->page . '&action=submit_editor&id=' . $this->id_article;
+
+$cancel_button = 'index.php?page=' . $this->page;
+$cancel_button .= !empty($this->id_article) ? '&id=' . $this->id_article : '';
+
+$upload_ajax = 'index.php?action=upload_image_editor';
+$upload_ajax .= !empty($this->id_article) ? '&id=' . $this->id_article : '';
+
 ob_start();
 ?>
 <div class="conteneur_article" >
-    <form action="<?= $this->form_action_file ?>" method="POST" enctype="multipart/form-data" >
+    <form action="<?= $submit_action ?>" method="POST" enctype="multipart/form-data" >
         <textarea id="editor" name="contenu" ></textarea>
         <input class="boutonSubmitEditeur" type="submit" value="Valider">
-        <a class="boutonAnnuler" href="<?= $this->from ?>" >
+        <a class="boutonAnnuler" href="<?= $cancel_button ?>" >
             <input type="button" value="Annuler"></a>
         <script type="importmap">
         {
@@ -34,7 +42,7 @@ ob_start();
             
             let editor;
             let html_existant = '<?= $texte ?>'; // $texte doit avoir été sécurisé: simple quotes échappées au minimum
-            let upload_url = '<?= $this->upload_ajax_url ?>';
+            let upload_url = '<?= $upload_ajax ?>';
             
             // ATTENTION: si l'éditeur ne fonctionne pas, empêcher qu'on puisse cliquer sur Valider!
             // Il y a aussi des paramètres dans le fichier de config: ckeditor/webpack.config.js
diff --git a/src/view/templates/page.php b/src/view/templates/page.php
index 5051a5f..05c7444 100644
--- a/src/view/templates/page.php
+++ b/src/view/templates/page.php
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title></title>
     <link rel="icon" type="image/png" href="">
-    <?= $ckeditor->css_outside_editor_tag ?>
-    <?= $ckeditor->css_editor_tag ?>
+    <?= $ckeditor->getCSSOutsideEditorTag() ?>
+    <?= $ckeditor->getCSSEditorTag() ?>
 </head>
 <body>
     <div>
-- 
cgit v1.2.3