Addon htmlArea4G 

(c) PyG : dev@cornalys.com -- v0.1 21/11/2003
Code sous licence GNU/GPL

Crédits

Version de HTMLArea : 2.03
Auteur du plugin HTMLArea : InteractiveTools : http://www.interactivetools.com/ sous licence BSD
Demo du plugin HTMLArea : http://www.interactivetools.com/products/htmlarea/

Objet

Permet de mettre en forme le contenu des champs textes multilignes (par exemple dans la messagerie ou le forum).

Screenshots / Démonstration

Capture Messagerie

Capture Forum

Fonctionnalités

htmlArea est un editeur WISYWYG (="What You See Is What You Get") pour les champs <textarea> qui permet de faire de la mise en forme HTML sans écrire de code, grâce à une interface similaire à celle d'un traitement de texte. Vous pouvez :

• Formatter le texte en gras, italique ou souligné.
• Changer la police, sa taille ou sa couleur.
• Centrer ou aligner le texte (à droite ou à gauche).
• Faire des listes (à puces ou numérotées).
• Identer des paragraphes (tabulations).
• Insérer des lignes horizontales.
• Insérer des hyperliens ou des images.
• Insérer des tableau.
• Voir la source HTML de ce que vous éditez.
• Créer vos propres boutons pour insérer des blocs de textes ou utiliser vos propres fonctions.

Attention : la version 2.03 ne fonctionne qu'avec Internet Explorer 5 et supérieur. La version 3 (beta) supporte Internet Explorer ET Mozila 1.3 et suivants. Par contre, l'utilisation du plugin 2.03 avec les navigateurs autres que Internet Explorer n'est pas pénalisante : les fonctions de mise en forme sont inaccessibles (et invisibles), sans générer d'erreur. L'utilisateur ne peut donc pas utiliser la mise en forme, et voit s'afficher un champs de texte "classique".

Installation

1- Dézippez le fichier et placez le dossier htmlarea (attention : pas de majuscules) dans votre dossier /addons

Copiez le code suivant en fin de fichier /ganesha/inc/html.inc.php (avant le ?>, quand même !)

function AddHtmlArea($Chemin=false) {
// Javascript indispensable au plugin htmlarea
if ($Chemin==false) { global $HTTP; $Chemin=$HTTP['main']."addons/htmlarea/"; }
echo <<< EOM
<script language="Javascript1.2">
<!-- // load htmlarea
_editor_url = "{$Chemin}"; // URL to htmlarea files
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
document.write(' language="Javascript1.2"></scr' + 'ipt>');
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
// -->
</script>
EOM;
}

Copiez le code suivant dans le fichier /ganesha/commun/fonctions.js

/*********************************************************/
// HTMLArea
function GenTaHtmlArea(textarea, typeconfig) {
var config = new Object(); // create new config object
switch (typeconfig) {
case 1 : //config 1 -> messagerie
config.bodyStyle = 'background-color: white; font-family: "Verdana"; font-size: x-small;';
config.toolbar = [
['bold','italic','underline','separator'],
['forecolor','backcolor','separator'],
];
break;
case 2 : //config 2 -> Forum
config.bodyStyle = 'font-family: "Courier New";';
config.toolbar = [
['bold','italic','underline','separator'],
['forecolor','backcolor','separator'],
];
break;
default : // config par défaut
config.width = "90%";
config.height = "200px";
config.bodyStyle = 'background-color: white; font-family: "Verdana"; font-size: x-small;';
// Add additional editor config settings here...
config.toolbar = [
['fontname'],['fontsize'],['fontstyle'],['linebreak'],
['bold','italic','underline','separator'],
['strikethrough','subscript','superscript','separator'],
['justifyleft','justifycenter','justifyright','separator'],
['OrderedList'],
['UnOrderedList','Outdent','Indent','separator'],
['forecolor','backcolor','separator'],
['custom1','custom2','custom3','separator'],
['HorizontalRule'],
['Createlink'],['InsertImage'],['htmlmode','separator'],['about','help']
['popupeditor']
];
break;
}
editor_generate(textarea,config);
}

Utilisation

Le principe est simple : il suffit d'inclure dans le code PHP, AVANT l'affichage du <textarea> (entre <head> et <textarea>), la ligne :

AddHtmlArea();

puis d'insérer APRES le <textarea> (entre </textarea> et </html>) la ligne.

PUT ("<script language=\"JavaScript1.2\" defer>\n GenTaHtmlArea(\"NomDuTa\",x);\n</script>");

où vous devrez remplacer NomDuTa par le nom donné au Textarea [valeur du "name" de la balise Textarea] et où x est un numéro de configuration.
Ce numéro de configuration correspond aux éléments que vous souhaitez voir affiché. Ainsi, dans le code ajouté dans le fichier javascript.js précédemment, on peut voir que si x vaut 1, on n'affichera QUE les éléments...

['bold','italic','underline','separator'],
['forecolor','backcolor','separator'],

...c'est à dire les boutons Gras, Italique, Souligné, Couleur de la police, Couleur de d'arrière plan de police.

Vous pouvez rajouter autant de configurations que nécéssaire, voire omettre le numéro de configuration, auquel cas TOUS les éléments seront affichés et disponibles.

Pour plus d'informations, se référer à la documentation sur InteractiveTools.

Exemples

Messagerie

Première étape, dans le fichier /ganesha/inc/webmail.inc.php, on repère la fonction MenuWebmail() qui génère le code HTML précédent le formulaire.
On y ajoute donc, par exemple après...

Title( $st_menu['mess'].' <b>['.$name_groupe.']</b>');

...le code...

//ajout htmlarea
AddHtmlArea();
// fin ajout htmlarea

Deuxième étape, répérer le nom et l'emplacement du Textarea.
Lorsqu'on affiche la source du formulaire de la messagerie, il est indiqué dans la fonction FrmNewWebmail()

put(' <td><textarea name="Message" cols="40" rows="10" wrap="virtual" >'.$message.'</textarea></td>');

Par conséquent, on sait que le <textarea> s'appelle "Message".
On ajoutera donc, à la fin de cette fonction, juste après CloseBorder(); ...

// ajout HTMLAREA
PUT ("<script language=\"JavaScript1.2\" defer>\n GenTaHtmlArea(\"Message\",1);\n</script>");
// fin ajout HTMLAREA

Forum

Le cas du forum est quasiment identique :

1- on ouvre /phorum/include/form.inc.php

2- Avant la première balise <br> (entre ?> et <BR>), on ajoute ...

<?php
// ajout pyg pour HtmlArea dans Phorum : 21/11/2003
AddHtmlArea();
// fin ajout pyg 21/11/2003
?>

3- En fin de fichier, (après la balise </TABLE>), on ajoute :

<?php
// ajout HTMLAREA
PUT ("<script language=\"JavaScript1.2\" defer>\n GenTaHtmlArea(\"body\",2);\n</script>");
// fin ajout HTMLAREA
?>

Le plugin est alors installé, mais pour fonctionner, il faut lister les balises autorisées par le forum et donc :

4- Ouvrir la base de données et la table ga_forums

5- Remplacer dans les champs "html" la valeur "N" par "strong|em|u|font|a|p". Ainsi les balises Gras, Italique, etc seront autorisées.

5bis (optionnel) : Dans la base, pour la table ga_forums, remplacez éventuellement la valeur par défaut lors de la création d'un nouvel enregistrement, ainsi ces balises seront directement accéptées lors de la création d'un nouveau groupe de formation (et donc d'un nouveau forum). Cela nécéssite alors de changer dans le fichier /ganesha/inc/phorum.inc.php (fonction CreatePhorum() ) :

// $sSQL = "Insert into ".$TBL['forums']." (id, name, active, description, config_suffix, folder, parent, display, table_name, moderation, mod_email, mod_pass, email_list, email_return, email_tag, check_dup, multi_level, collapse, flat, staff_host, lang, html, table_width, table_header_color, table_header_font_color, table_body_color_1, table_body_color_2, table_body_font_color_1, table_body_font_color_2, nav_color, nav_font_color, allow_uploads) ";
// $sSQL.= "values ('$numphorum', '$groupename', '1', 'Forum du groupe $groupename', '1', '0', '0', '30', 'g".$idg."', 'n', '', '', '', '', '', '0', '1', '1', '1', '', '$gLang', 'N', '80%', '#999999', '#FFFFFF', '#FFFFFF', '#F2F2F2', '#000000', '#000000', '#F2F2F2', '#000000','N')";

par

$sSQL = "Insert into ".$TBL['forums']." (id, name, active, description, config_suffix, folder, parent, display, table_name, moderation, mod_email, mod_pass, email_list, email_return, email_tag, check_dup, multi_level, collapse, flat, staff_host, lang, table_width, table_header_color, table_header_font_color, table_body_color_1, table_body_color_2, table_body_font_color_1, table_body_font_color_2, nav_color, nav_font_color, allow_uploads) ";
$sSQL.= "values ('$numphorum', '$groupename', '1', 'Forum du groupe $groupename', '1', '0', '0', '30', 'g".$idg."', 'n', '', '', '', '', '', '0', '1', '1', '1', '', '$gLang', '80%', '#999999', '#FFFFFF', '#FFFFFF', '#F2F2F2', '#000000', '#000000', '#F2F2F2', '#000000','N')";