TUTOS.EU

Avoir un éditeur de texte en HTML avec ckeditor

Disposer d'une interface pour saisir et éditer du texte sur une page web

Il faut tout un package pour que ckeditor fonctionne.
Il est disponible sous forme d'un zip en bas de page mais il n'est pas forcément à jour. Il permet cependant de se faire la main et de comprendre le principe.

L'interface ressemble à ceci

Voici le code de la page de démo qui est dans le zip joint

<!DOCTYPE html>
<HTML lang="fr">
	<HEAD>
		<meta charset="utf-8" />
		<script src="/ckeditor/ckeditor.js"></script>
	</HEAD>

	<BODY>
		<div id="bloc_page">
			<?php
			
				$varNbrTabs = 3;
			
				$TxtContenuCKEditor = $_POST['TxtContenuCKEditor'];	
				//echo "TxtContenuCKEditor : $TxtContenuCKEditor</br>\n";
				
				$TXTemplacementfichier = $_POST['TXTemplacementfichier'];	
				//echo "TXTemplacementfichier : $TXTemplacementfichier</br>\n";

				//Si on a posté le formulaire sur lui même, cad si on a renseigné la variable $TxtContenuCKEditor
				//Alors on va écrire le contenu de $TxtContenuCKEditor dans un fichier
				if ((strlen($TxtContenuCKEditor) > 0) && (strlen($TXTemplacementfichier) > 0)){

					if (file_exists($TXTemplacementfichier)) {
						$FichierExistant = 1;
						echo fctEchoTabs($varNbrTabs)."Le fichier $TXTemplacementfichier existe déjà. Il va être écrasé.<br />\n";
					}
					else {
						$FichierExistant = 0;
						echo fctEchoTabs($varNbrTabs)."Le fichier $TXTemplacementfichier n'existe pas et il va être créé.<br />\n";
					}

					//Création du fichier
					$monfichier = fopen($TXTemplacementfichier, 'w');
					fputs($monfichier, $TxtContenuCKEditor."");
					fclose($monfichier);	

				}

				//Lecture du fichier et stockage du contenu dans $TxtContenuCKEditor
				if (strlen($TXTemplacementfichier) > 0){
					if (file_exists($TXTemplacementfichier)) {
						echo fctEchoTabs($varNbrTabs)."Le fichier '$TXTemplacementfichier' a bien été trouvé.<br />\n";	
						
						$lines = file_get_contents($TXTemplacementfichier, true);
						$TxtContenuCKEditor = $lines;
						
					}
					else{echo fctEchoTabs($varNbrTabs)."Le fichier '$TXTemplacementfichier' n'a pas été trouvé.<br />\n";}
				}
				else{
					echo fctEchoTabs($varNbrTabs)."La variable avec l'emplacement du fichier est vide.<br />\n";
					$TXTemplacementfichier = "aaaTestCKEditor.txt";
				}

				//Affichage du formulaire et de la textarea qui servira à CKEditor
				echo fctEchoTabs($varNbrTabs)."<form method=\"post\" name=\"FormCKEditor\" id=\"FormCKEditor\" action=\"ckeditor.php\" enctype=\"multipart/form-data\">\n";
				$varNbrTabs++;
				echo fctEchoTabs($varNbrTabs)."<p>Mettre le chemin vers le fichier à créer ici :</p>\n";
				//echo fctEchoTabs($varNbrTabs)."<input type=\"hidden\" name=\"TXTemplacementfichier\" id=\"TXTemplacementfichier\" value=\"". $TXTemplacementfichier."\" >\n"; //Valeur cachée contenant l'emplacement du ficher
				echo fctEchoTabs($varNbrTabs)."<input type=\"text\" name=\"TXTemplacementfichier\" id=\"TXTemplacementfichier\" value=\"". $TXTemplacementfichier."\" >\n"; //Valeur contenant l'emplacement du ficher

				echo fctEchoTabs($varNbrTabs)."<textarea name=\"TxtContenuCKEditor\" id=\"TxtContenuCKEditor\" cols=\"80\" rows=\"20\">".$TxtContenuCKEditor."</textarea>\n";
				
				echo fctEchoTabs($varNbrTabs)."<input type=\"submit\" value=\"Envoyer\" />\n";
				$varNbrTabs--;
				echo fctEchoTabs($varNbrTabs)."</form>\n";
				echo fctEchoTabs($varNbrTabs)."\n";

				//Déclenchement du script qui active CKEditor V4
				echo fctEchoTabs($varNbrTabs)."<script>\n";
				$varNbrTabs++;
				echo fctEchoTabs($varNbrTabs)."CKEDITOR.replace( 'TxtContenuCKEditor' );\n";
				$varNbrTabs--;
				echo fctEchoTabs($varNbrTabs)."</script>\n";		
				$varNbrTabs--;

				function fctEchoTabs($nbrTabs){

					$MesTabs = "";
					for($NumeroTab=0;$NumeroTab<$nbrTabs;$NumeroTab++) {
						$MesTabs = $MesTabs.chr(9);
					}
					return $MesTabs;

				}
				
			?>

		</div> <!-- div bloc_page -->
	</BODY>

</HTML>
Lien vers le fichier : cliquez ici Copier le code

Téléchargement(s)

NomSite Web d origineDescription
3766_ckeditor.zip https://ckeditor.com HTML editor


2