Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

touchfrench · 2007-12-14 06:08:24

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">

</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

infiniclick · 2008-02-20 19:13:25

Salut

Merci pour ce tutoriel très pratique.

Par contre, j'ai du modifié la ligne

<script type="text/javascript" src="..includes/fckeditor/fckeditor.js"></script>

par

<script type="text/javascript" src="../includes/fckeditor/fckeditor.js"></script>

car j'avais une erreur javascript.

Depuis FCKeditor s'affiche parfaitement.

Le seul soucis qu'il me reste, et il est de taille, c'est que je ne parviens ni à créer, ni modifier de newsletter. J'ai beau saisir du texte, ajouter des tableaux, quand je prévisualise la fenêtre reste blanche.

Pareil, impossible d'insérer le lien de désinscription.

Y'aurait il d'autres modifs à effectuer ?

Merci

infiniclick · 2008-02-21 01:32:46

J'ai enfin trouvé l'astuce

Dans le fichier templates/admin/editor.js, il faut commenter les lignes suivantes :

/*if( support_dom() )
{
var width = (window.screen.width - 200);
var height = (window.screen.height - 200);
var top = 50;
var left = ((window.screen.width - width)/2);

DOM_Event.addListener(window, 'load', make_editor, false);
}*/

Infiniclick

nico280880 · 2008-02-21 12:35:10

Un grand merci pour ce très bon tutoriel.
Un problème cependant et concernant l'ajout d'images dans le mail via fckeditor puisque l'url ne pointe pas vers une adresse complète du style <img src="http://www.monsite.fr/upload/image.jpg"> mais vers ceci : <img src="/userfiles/image/upload/image.jpg">

Bien évidemment, cela pose problème pour visualiser les mails reçus !

J'espère que mon message est compréhensible et que quelqu'un aura une réponse !!!

Merci

infiniclick · 2008-02-21 13:09:01

Salut

Dans le fichier

includes/fckeditor/editor/filemanager/connectors/php/config.php

à la ligne 34 tu as

$Config['UserFilesPath'] = '/userfiles/' ;

et à la ligne 40 tu as

$Config['UserFilesAbsolutePath'] = '' ;

Essaye de les modifier

Je l'ai installé hier et je n'ai pas encore fais de tests donc je ne te garantis pas à 100% que ce soit là

Merci de nous indiquer si cela fontionne

Infiniclick

hit7374 · 2008-03-06 11:06:07

tout fonctionne à merveille, merci.
je cherche comment élargir la fenêtre de l'éditeur,
je vais fouiller chez Tiny
amicalement

tout béta, j'aurais du chercher avant de poser la question. j'ai ajouter la ligne width : "800", (attention à la , suivant ou vous mettez cette ligne) dans tiny_mce_config.js
ça servira à d'autres

-=crevette=- · 2008-04-06 17:22:16

Bonjour,

Merci beaucoup pour ce tutoriel très sympa. Cela fonctionne nickel avec tinymce_3_0_6_1.

Une petite info complémentaire si vous chargez les fichiers de langue. Pour activer les fichiers de langue français, il faut ajouter dans le fichier "tiny_mce_config.js" la ligne suivante :

language : "fr",

A bientôt

P.S : Il serait d'ailleurs intéressant de mettre ce sujet en post-it.

infiniclick · 2008-04-29 02:31:54

Pour les personnes qui rencontrent des problèmes pour l'affichage des images dans les mails avec FCK Editor, voici la solution :

Ouvrir le fichier fckeditor/editor/filemanager/browser/default/frmresoucrslist.html

Remplacer

function OpenFile( fileUrl )
{
window.top.opener.SetUrl( encodeURI( fileUrl ) ) ;
window.top.close() ;
window.top.opener.focus() ;
}

Par

function OpenFile( fileUrl )
{
//window.top.opener.SetUrl( encodeURI( fileUrl ) ) ;
var urlChange = 'http://'+window.location.host+fileUrl.toString();
window.top.opener.SetUrl(urlChange) ;
window.top.close() ;
window.top.opener.focus() ;
}

Et voilà le tour est joué, vos images apparaissent enfin dans le mail.

Infiniclick

m0m0k0 · 2008-06-26 14:07:20

Hello tout le monde

Tout d'abord, merci à touchfrench & infiniclick pour l'aide que vous nous fournissez à nous, les non développeurs qui souhaitent utiliser WANewsletter avec des fonctionnalités avancées.

J'ai installé FCKEditor comme expliqué dans le tuto, puis fait les modifs données par la suite pour permettre l'affichage de l'image.

Pour les personnes qui rencontrent des problèmes pour l'affichage des images dans les mails avec FCK Editor, voici la solution :
Ouvrir le fichier fckeditor/editor/filemanager/browser/default/frmresoucrslist.html

J'ai donc remplacé, mais ça n'a rien changé. J'ai ensuite re-modifié "var urlChange = 'http://'+window.location.host+fileUrl.toString(); " pour "var urlChange = 'http://www.forumdescommunes.fr/newsletter/'+window.location.host+fileUrl.toString();", toujours sans succès : l'image envoyée continue d'avoir une url du type http://newsletter/userfiles/xxxx.jpg donc elle ne s'affiche pas dans le mail.

includes/fckeditor/editor/filemanager/connectors/php/config.php
à la ligne 34 tu as

Lorsque je choisis l'URL absolu ("http://www.mydomain.fr/newsletter/userfiles/") à la place de l'URL relatif "/newsletter/userfiles"), j'ai une alerte lors de l'upload d'image, comme quoi il est impossible de créer le directory demandé.

Donc voilà, au final, le seul moyen actuellement pour moi d'afficher mes images au sein du mail est de l'uploader normalement, de faire un clic droit dessus, et de rajouter devant son URL le "http://www.mydomain.fr" manquant. Pas super difficile non plus vous me direz... mais si vous avez la solution pour pallier ce problème, je suis preneuse !

Merci à tous :d

infiniclick · 2008-06-26 16:33:15

Salut

Pour ta première demande, il ne faut pas seulement remplacer une ligne. Regarde bien le code indiqué. Au départ tu as 3 lignes et tu en as 5 à l'arrivée.

Pour ta deuxième demande, as tu autorisé l'écriture dans ton dossier distant pour le dossier ou tu dois uploader les images ? (CHMOD 755 ou 777 avec ton logiciel FTP sur le dossier concerné)

Infiniclick

m0m0k0 · 2008-06-26 16:50:02

Salut
Pour ta première demande, il ne faut pas seulement remplacer une ligne. Regarde bien le code indiqué. Au départ tu as 3 lignes et tu en as 5 à l'arrivée.

J'ai bien tout pris dans le code donné. Ce que je disais justement, c'est qu'à l'intérieur de ce code, après avoir copié/collé ta modif et après avoir vu que ça ne fonctionnait pas, j'ai en plus remodifié la ligne spécifique "var URLChange.

En gros, voici mon bout de code

function OpenFile( fileUrl )
{
//window.top.opener.SetUrl( encodeURI( fileUrl ) ) ;
var urlChange = 'http://www.forumdescommunes.fr/newsletter/'+window.location.host+fileUrl.toString();
window.top.opener.SetUrl(urlChange) ;
window.top.close() ;
window.top.opener.focus() ;
}

Et bien sûr ça ne change rien.

Pour ta deuxième demande, as tu autorisé l'écriture dans ton dossier distant pour le dossier ou tu dois uploader les images ? (CHMOD 755 ou 777 avec ton logiciel FTP sur le dossier concerné)
Infiniclick

Tout est bien autorisé, la preuve étant que lorsque j'utilise l'URL relative "newsletter/userfiles", le fichier est correctement uploadé sur le serveur.

Mon seul problème réside donc dans le mail au final, car il traite l'image uploadée avec une url du type "http://newsletter/userfiles/monimage.jpg".

Et curieusement, lorsque je clique sur la preview de FCK, l'image s'affiche correctement avec la bonne url http://www.mydomain.fr/newsletter/userf … nimage.jpg

Alors où passe donc le www.mydomain.fr lors de l'envoi ? :idea:

Merci de ton aide !

infiniclick · 2008-06-26 16:57:57

Avec ce code

function OpenFile( fileUrl )
{
//window.top.opener.SetUrl( encodeURI( fileUrl ) ) ;
var urlChange = 'http://'+window.location.host+fileUrl.toString();
window.top.opener.SetUrl(urlChange) ;
window.top.close() ;
window.top.opener.focus() ;
}

Ca doit fonctionner.

J'ai 4 clients qui utilisent wanewsletter avec FCK Editor qui tourne sans aucun problème avec ce paramètre.

Je reste dispo si tu as besoin

Au pire, file moi ton numéro (fixe de préférence) par MP

A+

Infiniclick

m0m0k0 · 2008-06-26 17:14:09

Je viens de tester en direct. J'ai remis le code tel que tu l'as donné, et une nouvelle fois, voilà ce qui s'affiche dans le mail reçu : http://newsletter/userfiles/84610,1192572019,2.jpg :cry:

Pour info, j'ai testé la réception sur le webmail gmail et sur une adresse réceptionnée sur Outlook mais je suppose que ça n'a aucune incidence.

Et encore une fois, je te remercie de ta disponibilité, c'est vraiment super sympa

infiniclick · 2008-06-26 17:19:40

Juste pour info, as tu réglé le chemin de ton dossier image dans le fichier includes/fckeditor/editor/filemanager/connectors/php/config.php aux lignes 34 et 40 ?

Par exemple :

> Ligne 34 = /images/

> Ligne 40 = /var/www/vhosts/tondomaine.com/httpdocs/images/

Penser également à mettre la ligne 30 sur True si elle ne l'est pas déjà.

Infiniclick

m0m0k0 · 2008-06-26 17:29:31

Ecoute, je suis une sacrée idiote... j'ai instinctivement mis "http://www.mydomain.fr/blablabla" en chemin absolu.

Je teste avec le véritable chemin absolu... si je le trouve, et je te tiens au courant.

Merci

m0m0k0 · 2008-06-26 18:20:34

Bon ba même problème, en mettant le chemin absolu.

// Path to user files relative to the document root.
$Config['UserFilesPath'] = '/newsletter/userfiles/' ;

// Fill the following value it you prefer to specify the absolute path for the
// user files directory. Useful if you are using a virtual directory, symbolic
// link or alias. Examples: 'C:\\MySite\\userfiles\\' or '/root/mysite/userfiles/'.
// Attention: The above 'UserFilesPath' must point to the same directory.
$Config['UserFilesAbsolutePath'] = '/home.10.34/forumdesc/www/newsletter/userfiles/' ;

Pfiou !! Je commence à être fatiguée là

infiniclick · 2008-06-26 18:23:54

Ton dossier Userfiles existe bien je suppose ?

Infiniclick

m0m0k0 · 2008-06-26 18:27:42

Bien sûr, je suis allée plusieurs fois dedans, et les images s'uploadent bien dedans également.

infiniclick · 2008-06-26 23:25:32

Là je sèche un petit peu.

Il semblerait que tout soit correct et pourtant il y a un problème quelque part.

Je continue de réfléchir et reviens vers toi si j'ai une piste

Infiniclick

m0m0k0 · 2008-06-27 09:44:23

Merci beaucoup. En attendant, je continuerai mon bidouillage, à savoir faire clic droit sur l'image dans la newsletter à envoyer et rajouter le reste de l'URL devant.

aktos · 2008-08-02 19:19:10

J'ai suivi ce tuto pour avec tinymce mais maintenant je bloque au message

Vous devez placer le lien de désinscription

Comment faire ?

leseeb22 · 2008-08-18 19:17:28

infiniclick a écrit :

Salut
Dans le fichier
includes/fckeditor/editor/filemanager/connectors/php/config.php
à la ligne 34 tu as
$Config['UserFilesPath'] = '/userfiles/' ;
et à la ligne 40 tu as
$Config['UserFilesAbsolutePath'] = '' ;
Essaye de les modifier
Je l'ai installé hier et je n'ai pas encore fais de tests donc je ne te garantis pas à 100% que ce soit là
Merci de nous indiquer si cela fontionne
Infiniclick

hmm j'ai le meme soucis avec tynimce
mais je trouve pas ou et comment mettre mon url absolu pour ce probleme d'image

leseeb22 · 2008-08-19 11:30:51

Je cherche la soluce qui permet de transformer les liens et les images

de
src=/upload/voiture.jpg
à
src=http://www.monsite.com

La soluce a été donné pour FCK
Mais avec tyni mce je ne trouve pas

en lisant les notices
j'ai rajouté dans tiny_mce_config.js

elements : 'nourlconvert',
relative_urls : false

j'ai tésté
de diverse facon
je trouve pas
HELP

merci
Seeb

leseeb22 · 2008-08-21 13:35:45

Il faut mettre ca dans le tiny_mce_config.js

relative_urls : false,
remove_script_host : false,
document_base_url : "http://www.site.com/path1/"

Swampsnake · 2009-04-16 10:12:18

Bonjour à tous,

Après avoir installé FCKeditor, si ma liste de diffusion n'autorise QUE les email au format txt, j'ai l'erreur JavaScript suivante :

Error: The TEXTAREA with id or name set to "body_html" was not found

Quelqu'un aurait-il une solution pour ne pas avoir une boite de dialogue qui s'ouvre à chaque fois pour me dire qu'il ne trouve pas le textarea pour l'html (ce qui est normal puisque je suis en envoi d'email txt...)

Merci d'avance

Support Wanewsletter

Annonce

#1 2007-12-14 06:08:24

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#2 2008-02-20 19:13:25

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#3 2008-02-21 01:32:46

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#4 2008-02-21 12:35:10

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#5 2008-02-21 13:09:01

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#6 2008-03-06 11:06:07

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#7 2008-04-06 17:22:16

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#8 2008-04-29 02:31:54

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#9 2008-06-26 14:07:20

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#10 2008-06-26 16:33:15

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#11 2008-06-26 16:50:02

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#12 2008-06-26 16:57:57

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#13 2008-06-26 17:14:09

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#14 2008-06-26 17:19:40

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#15 2008-06-26 17:29:31

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#16 2008-06-26 18:20:34

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#17 2008-06-26 18:23:54

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#18 2008-06-26 18:27:42

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#19 2008-06-26 23:25:32

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#20 2008-06-27 09:44:23

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#21 2008-08-02 19:19:10

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#22 2008-08-18 19:17:28

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#23 2008-08-19 11:30:51

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#24 2008-08-21 13:35:45

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

#25 2009-04-16 10:12:18

Re : Tutoriel: Ajout d'un éditeur WYSIWYG dans Wanewsletter 2.3.

Pied de page des forums