Vous n'êtes pas identifié(e).
[25 janvier 2021] - Publication de Wanewsletter 3.1.0
Pages : 1
Salut à tous,
J'ai lu plusieurs topics au sujet de l'intégration d'un éditeur WYSIWYG dans ce fabuleux script qu'est Wanewsletter (mes félicitations à l'équipe de PhpCodeur!) mais ceux-ci n'étant pas toujours à jour ou étant un peu fouillis, je me suis permis de rédiger ce tutoriel regroupant l'intégration au choix de TinyMce ou de FCKEditor dans Wanewsletter 2.3.2.
Testé et approuvé par mes soins avec les versions suivantes:
- TinyMCE 2.1.3,
- FCKeditor 2.5,
- et Wanewsletter 2.3.2.
(les lignes d'insertion de code peuvent changer si d'autres versions sont utilisées).
Attention: dans les 2 cas d'intégration, les boutons "Placer le lien de désinscription" et "Prévisualiser" seront perdus, il faudra donc placer le tag de désinscription {LINKS} manuellement et utiliser l'aperçu intégré de chaque éditeur WYSIWYG. L'intégration ne fonctionne qu'avec les newsletters html et non texte.
Limitations connues: l'insertion d'images dans le corps du texte ne fonctionne qu'en édition et en prévisualisation, les newsletters reçues comporteront hélas une image "cassée" car le lien absolu est incorrect, il faut donc continuer à utiliser "cid:nom_de_l'image" pour que l'image s'affiche dans les newsletters reçues.
I. Intégration de TinyMce
1. Transfert de TinyMce
Télécharger TinyMce sur le site suivant: http://tinymce.moxiecode.com/
Décompresser l'archive sur votre disque dur et transférer avec votre client ftp le répertoire "tiny_mce" se trouvant dans le sous-répertoire "jscripts" vers le sous-dossier "includes" de Wanewsletter.
Ce qui nous donne donc "includes/tiny_mce" comme chemin relatif.
2. Ajout du code TinyMce
Sur votre disque dur, éditer le fichier "envoi.php" se trouvant dans le répertoire "admin" de Wanewsletter et supprimer ou mettre en commentaires la ligne 1109:
// $output->addScript(WA_ROOTDIR . '/templates/admin/editor.js');
Insérer ensuite à la ligne 1106 le code suivant:
//Insertion du script TinyMce
$output->addScript(WA_ROOTDIR . '/includes/tiny_mce/tiny_mce.js');
//Insertion des tags de configuration du script TinyMce
$output->addScript(WA_ROOTDIR . '/includes/tiny_mce/tiny_mce_config.js');
Transférer le fichier "envoi.php" modifié dans le répertoire "admin" à l'aide de votre client ftp.
3. Création du fichier de configuration de TinyMce
Sur votre disque dur, créer le fichier "tiny_mce_config.js" à l'emplacement "/includes/tiny_mce/" avec un éditeur de texte (le bloc-notes de windows fera l'affaire) et y mettre le code suivant:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,paste,directionality,fullscreen,noneditable,contextmenu",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "hr[class|width|size|noshade]",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_link_targets : "_something=My somthing;_something2=My somthing2;_something3=My somthing3;",
apply_source_formatting : true
});
Transférer le fichier "tiny_mce_config.js" créé dans le répertoire "/includes/tiny_mce/" à l'aide de votre client ftp.
Et voilà! TinyMce devrait normalement s'afficher dans votre newsletter au format html. Il faut parfois effacer les fichiers internet temporaires de votre navigateur (internet explorer surtout) et rafraichir la page pour voir apparaître le menu de TinyMce.
II. Intégration de FCKEditor
1. Transfert de FCKEditor
Télécharger FCKEditor sur le site suivant: http://www.fckeditor.net/
Décompresser l'archive sur votre disque dur et transférer avec votre client ftp le répertoire "fckeditor" vers le sous-dossier "includes" de Wanewsletter.
Ce qui nous donne donc "includes/fckeditor" comme chemin relatif.
2. Ajout du code FCKEditor
a. Modification du fichier "send_body.tpl"
Sur votre disque dur, éditer le fichier "send_body.tpl" se trouvant dans le répertoire de WaNewsletter "templates/admin" puis ajouter après la balise <form ... > (ligne 11) le code suivant:
<script type="text/javascript">
<!--
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'body_html','100%','480','Default','' );
oFCKeditor.BasePath = "../includes/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
//-->
</script>
Transférer le fichier "send_body.tpl" modifié dans le répertoire "templates/admin" à l'aide de votre client ftp.
b. Modification du fichier "header.tpl"
Sur votre disque dur, éditer le fichier "header.tpl" se trouvant dans le répertoire de WaNewsletter "templates/admin" puis ajouter après la balise <head ... > (ligne 20) le code suivant:
<script type="text/javascript" src="..includes/fckeditor/fckeditor.js"></script>
Transférer le fichier "header.tpl" modifié dans le répertoire "templates/admin" à l'aide de votre client ftp.
3. Activation du connecteur php (optionnel)
Sur votre disque dur, éditer le fichier "config.php" dans le répertoire "fckeditor/editor/filemanager/connectors/php" à la ligne 30 et remplacer la ligne suivante:
$Config['Enabled'] = false ;
par
$Config['Enabled'] = true ;
Transférer le fichier "config.php" modifié dans le répertoire "includes/fckeditor/editor/filemanager/connectors/php" à l'aide de votre client ftp.
Et voilà! FCKEditor devrait normalement s'afficher dans votre newsletter au format html. Il faut parfois effacer les fichiers internet temporaires de votre navigateur (internet explorer surtout) et rafraichir la page pour voir apparaître le menu de FCKEditor.
N'hésiter pas à indiquer les éventuelles erreurs ou oublis commises dans ce tutoriel.
a+
Touchfrench
Pages : 1