Skip to content

WysiwygEditor

Aurélien Maille edited this page Jul 14, 2016 · 3 revisions

Ajouter un éditeur Wysiwyg

Attention : Ce tutorial n'est plus à jour, en ce sens que TinyMCE et CKEditor ont pu depuis évolué de telle sorte que la méthode d'intégration proposée ici ne soit plus fonctionnelle. Une réactualisation devrait avoir lieu prochainement.

Ce tutorial concerne Wanewsletter 2.3.x. TinyMCE est intégré nativement à Wanewsletter 3.

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 src="../templates/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
	<script>
	<!--
	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 src="../templates/ckeditor/ckeditor.js"></script>
	<script>
	<!--
	document.addEventListener('DOMContentLoaded', function() {
		CKEDITOR.replace('body_html');
	}, false);
	//-->
	</script>
	<style>
	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

Clone this wiki locally
You can’t perform that action at this time.