wiki:WysiwygEditor
Last modified 19 months ago

Ajouter un éditeur Wysiwyg

Intégrer un éditeur Wysiwyg à la page d’envoi de Wanewsletter pour faciliter la rédaction de lettres au format HTML.

  1. Avec TinyMCE
  2. Avec FCKEditor/CKEditor
  3. Liens divers

Avec TinyMCE

Ce qui suit est valable pour TinyMCE 3.x.

On suppose que le dossier d’installation de TinyMCE se trouve dans le dossier templates/ de wanewsletter.
Ajoutez le bloc de code suivant en tête du fichier templates/admin/send_body.tpl. 

<script type="text/javascript" src="../templates/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
<!--
function WanConvertURL(url, node, on_save)
{
	if( url.indexOf('cid:') == 0 ) {
		url = url.replace('cid:','../options/show.php?file=');
	}
	
	return url;
}

tinyMCE.init({
	mode : "exact",
	elements : "body_html",
	theme : "advanced",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	
	relative_urls : true,
	urlconverter_callback : "WanConvertURL",
	setup : function(ed) {
		ed.onBeforeSetContent.add(function(ed, o) {
			o.content = o.content.replace(/<([^>]+)=\s*("|\')cid:/g,'<$1=$2../options/show.php?file=');
		});
		ed.onGetContent.add(function(ed, o) {
			o.content = o.content.replace(/<([^>]+)=\s*("|\').*?\/options\/show\.php\?file=/g,'<$1=$2cid:');
		});
	}
});

window._old_addLinks = window.addLinks;
window.addLinks = function(evt) {
	if( evt.currentTarget.id == 'addLinks2' ) {
		tinyMCE.execCommand('mceInsertContent', false, '&#123;LINKS&#125;');
	}
	else {
		window._old_addLinks(evt);
	}
};
//-->
</script>

Modifiez si nécessaire l’attribut src de la balise script si TinyMCE se trouve ailleurs dans votre arborescence web.

C’est tout !

Il y a un petit bug cependant. Lorsqu’on édite une image avec le bouton image de l’interface de tinymce, l’url indiquée n’est plus cid:image.png mais ../options/show.php?file=image.png. Je n’ai pas encore trouvé comment inverser la conversion d’url dans ce cas d’utilisation.

Avec FCKEditor/CKEditor

Le code suivant a été testé avec succès avec CKEditor 3.4.x : 

<script type="text/javascript" src="../templates/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
DOM_Events.addListener('load', function() {
	CKEDITOR.replace('body_html');
}, false, document);
//-->
</script>
<style type="text/css">
div#textarea2 div.bottom { display: none; }
</style>

Là aussi, modifiez l’attribut src de la balise script selon l’emplacement de CKEditor dans votre arborescence web.

Quelques problèmes ici :

  • Il n’est plus possible d’utiliser le bouton d’ajout du lien de désinscription.
  • L’ajout d’images dans la lettre d’information est également problématique.
  • On ne peut pas charger une lettre d’information HTML précédemment sauvegardée dans Wanewsletter

Ces problèmes sont à l’étude.

Liens divers