PHP-Astux.info

<?php echo 'Redécouvrez PHP !'; ?>

FCK Editor avec NewsletTux 2 : rédiger une lettre en HTML

Sommaire

  1. Les prérequis
  2. L'installation de FCK Editor
  3. Les portions de code à changer
  4. Notes annexes

Les prérequis

Pour installer FCK Editor, il vous faut :

L'installation de FCK Editor

Je supposerai dans ce paragraphe et dans la suite de ce tutorial que votre site est accessible à l'adresse http://www.votresite.tld et que vous y avez créé un sous-dossier newslettux2/ où est installé le script NewsletTux, configuré.

Vous devez dout d'abord dézipper l'archive FCK Editor. Vous devez avoir une arborescence qui ressemble à ceci :

<REP> _samples
<REP> editor
_documentation.html
_upgrade.html
_whatsnew.html
_whatsnew_history.html
fckconfig.js
fckeditor.afp
fckeditor.asp
fckeditor.cfc
fckeditor.cfm
fckeditor.js
fckeditor.lasso
fckeditor.php
fckeditor.pl
fckeditor.py
fckeditor_php4.php
fckeditor_php5.php
fckpackager.xml
fckstyles.xml
fcktemplates.xml
fckutils.cfm
license.txt

Commencez par vous rendre dans le sous dossier _samples/ puis exécutez le fichier default.html. Vous verrez alors un menu déroulant présentant toutes les interfaces possibles de FCK Editor, pour NewsletTux et dans le cadre de ce tutorial, je prendrai la 13 : un bouton permet de passer d'un mode "textarea" à un mode FCKEditor. Vous pourrez donc directement envoyer vos newsletters en HTML, code créé par un outil tel que Dreamweaver.

Créez ensuite un sous dossier fckeditor/ dans newslettux2/admin/. Téléchargez-y l'archive de FCK Editor (le dossier _samples n'est pas obligatoire).

Les portions de code à changer

Les portions de code à changer sont dans les fichiers suivants :

Modification du header - admin_functions_template.php

Remplacez dans ce fichier, lignes 18 à 63 toute la fonction PageHeader() par ce code :

	function PageHeader($charset = CHARSET, $title = '')
	{
		global $ntux2, $url_filename;
		echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>'.PAGE_TITLE.'</title>
	<meta name="description" content="NewsletTux 2 http://www.php-astux.info" />
	<meta http-equiv="Content-Type" content="text/html; charset='.$charset.'" />
	<meta http-equiv="cache-control" content="no-cache,no-store" />
	<link href="template.css" rel="stylesheet" type="text/css" />
	<link href="theme_'.DEF_THEME.'.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="'.NTUX2_ROOT.'lib/functions.js"></script>
	<script type="text/javascript">
	<!--
		window.onload=montre;
		function montre(id)
		{
			var d = document.getElementById(id);
			for (var i = 1; i<=10; i++)
			{
				if (document.getElementById(\'smenu\'+i)) {document.getElementById(\'smenu\'+i).style.display=\'none\';}
			}
			if (d) {d.style.display=\'block\';}
		}

		window.onload=cache;
		function cache(id)
		{
			var d = document.getElementById(id);
			for (var i = 1; i<=10; i++)
			{
				if (document.getElementById(\'smenu\'+i)) {document.getElementById(\'smenu\'+i).style.display=\'none\';}
			}
			if (d) {d.style.display=\'hidden\';}
		}
	//-->
	</script>';
	if (($url_filename == 'write') && (isset($_GET['act'])) && ($_GET['act'] == 'write'))
	{
		echo '	<script type="text/javascript" src="'.NTUX2_ROOT.'admin/fckeditor/fckeditor.js"></script>'.CR;

		echo '	<script type="text/javascript">

		function Toggle()
		{
			// Try to get the FCKeditor instance, if available.
			var oEditor ;
			if ( typeof( FCKeditorAPI ) != \'undefined\' )
				oEditor = FCKeditorAPI.GetInstance( \'DataFCKeditor\' ) ;

			// Get the _Textarea and _FCKeditor DIVs.
			var eTextareaDiv	= document.getElementById( \'Textarea\' ) ;
			var eFCKeditorDiv	= document.getElementById( \'FCKeditor\' ) ;

			// If the _Textarea DIV is visible, switch to FCKeditor.
			if ( eTextareaDiv.style.display != \'none\' )
			{
				// If it is the first time, create the editor.
				if ( !oEditor )
				{
					CreateEditor() ;
				}
				else
				{
					// Set the current text in the textarea to the editor.
					oEditor.SetData( document.getElementById(\'message\').value ) ;
				}

				// Switch the DIVs display.
				eTextareaDiv.style.display = \'none\' ;
				eFCKeditorDiv.style.display = \'\' ;

				// This is a hack for Gecko 1.0.x ... it stops editing when the editor is hidden.
				if ( oEditor && !document.all )
				{
					if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
						oEditor.MakeEditable() ;
				}
			}
			else
			{
				// Set the textarea value to the editor value.
				document.getElementById(\'message\').value = oEditor.GetXHTML() ;

				// Switch the DIVs display.
				eTextareaDiv.style.display = \'\' ;
				eFCKeditorDiv.style.display = \'none\' ;
			}
		}

		function CreateEditor()
		{
			// Copy the value of the current textarea, to the textarea that will be used by the editor.
			document.getElementById(\'DataFCKeditor\').value = document.getElementById(\'message\').value ;

			// Automatically calculates the editor base path based on the _samples directory.
			// This is usefull only for these samples. A real application should use something like this:
			// oFCKeditor.BasePath = \'/fckeditor/\' ;	// \'/fckeditor/\' is the default value.
			//var sBasePath = document.location.href.substring(0,document.location.href.lastIndexOf(\'_samples\')) ;
			var sBasePath = \''.NTUX2_ROOT.'admin/fckeditor/\';

			// Create an instance of FCKeditor (using the target textarea as the name).
			var oFCKeditor = new FCKeditor( \'DataFCKeditor\' ) ;
			oFCKeditor.BasePath = sBasePath ;
			oFCKeditor.Width = \'100%\' ;
			oFCKeditor.Height = \'350\' ;
			oFCKeditor.ReplaceTextarea() ;
		}

		// The FCKeditor_OnComplete function is a special function called everytime an
		// editor instance is completely loaded and available for API interactions.
		function FCKeditor_OnComplete( editorInstance )
		{
			// Enable the switch button. It is disabled at startup, waiting the editor to be loaded.
			document.getElementById(\'BtnSwitchTextarea\').disabled = false ;
		}

		function PrepareSave()
		{
			// If the textarea isn\'t visible update the content from the editor.
			if ( document.getElementById( \'Textarea\' ).style.display == \'none\' )
			{
				var oEditor = FCKeditorAPI.GetInstance( \'DataFCKeditor\' ) ;
				document.getElementById( \'message\' ).value = oEditor.GetXHTML() ;
			}
		}

		</script>';
	};
	echo '
	<!--[if IE]>
		<link href="special_ie.css" rel="stylesheet" type="text/css" media="all" />
	<![endif]-->
</head>

<body>
<div id="global">
	<div id="header"><a href="http://www.php-astux.info"><img src="'.NTUX2_ROOT.'img/header.png" width="900" height="160" alt="Header NewsletTux 2" /></a></div>';
	};

Modification de l'écriture - write.php

Remplacez la ligne 799 :

	echo '<form id="newsletter" action="?act=write&to='.$to.'" method="post" enctype="multipart/form-data">'.CR;

par :

	echo '<form id="newsletter" action="?act=write&to='.$to.'" method="post" enctype="multipart/form-data" onsubmit="PrepareSave();">'.CR;

Ensuite, on masque les smileys et la barre de mise en forme. Remplacez la ligne 823 : 

	echo '    <fieldset><legend>'.$ntux2['write_tools'].'</legend>'.CR;

par :

	echo '    <fieldset style="display:none;"><legend>'.$ntux2['write_tools'].'</legend>'.CR;

Enfin, on insère le code de FCK Editor proprement dit. Ligne 833, juste après :

	echo '    <fieldset><legend>'.$ntux2['write_message'].'</legend>'.CR;

rajoutez ces 2 lignes :

	echo '	<div id="Textarea">'.CR;
	echo '	<p style="text-align:center;"><input type="button" value="Basculer vers FCKeditor" onclick="Toggle()" /></p>'.CR;

puis, dorénavant ligne 838, juste avant :

	echo '    </fieldset>'.CR;

rajoutez ce bloc de code :

	echo '	</div>'.CR;
	echo '		<div id="FCKeditor" style="display: none">'.CR;
	echo '			<input id="BtnSwitchTextarea" type="button" disabled="disabled" value="Switch to Textarea" onclick="Toggle()" />'.CR;
	echo '			<textarea id="DataFCKeditor" cols="80" rows="20"></textarea>'.CR;
	echo '		</div>'.CR;

Modification de la récupération du texte - functions_text.php

Dans functions_text.php, ajoutez // en début de la ligne 98 pour donner ce résultat :

	//$text = htmlspecialchars($text, ENT_QUOTES); // converts to string with " and ' as well

That's all folks ;-)

Notes annexes

ATTENTION : si vous utilisez des images dans vos newsletters, assurez-vous qu'elles soient bien accessibles sur votre site et incorporez-les avec l'URL complète jusqu'à votre site (ou un hébergeur d'images) ! En effet, le mail que les gens recevront ne contiendra que du texte, avec les adresses des images or si celles-ci ne peuvent être jointes, le lecteur ne pourra pas les afficher ...

D'autre part, utiliser FCK Editor signifie que vous n'envoyez que des newsletters en HTML, donc désactivez les inscriptions texte. Les utilisateurs qui seraient inscrits au format texte recevraient le code HTML et à mois d'avoir un dreamweaver dans les yeux, ne le comprendraient pas ... Cela me fait penser également qu'il faut vous signaler que par ce procédé, vous devez bien cibler votre public. Certains webmails ne savent pas (ou mal) lire les newsletters au format HTML.