Cette article ne vaut que pour une version de Magento 1.3 maximum. En effet, à partir de la version 1.4, Magento possède un WYSIWYG en standard.

L’éditeur de texte sous Magento est un simple « Textarea », tout ce qu’il y a de plus basique.

Il existe cependant 2 éditeurs à ajouter facilement grâce à Magento Connect : FCKEditor & TinyMCE. Ceux 2 éditeurs sont contenus dans le module Fontis WYSIWYG.

EDIT :

• Un nouveau module indépendant de Fontis a vu le jour (à tester) :
  • BouncingOrange TinyMCE (WYSIWYG) et sa banque de média (file manager)
• Nouvelle section de l’article : Configurer nos propres icones (lire la suite)

Rappel de l’installation du module :

• Allez sur la page du module Fontis WYSIWYG Editor sous Magento Connect
• Copier la clef d’extension (Sidebar de gauche > Cliquez « Get Extension Key » > Cochez « By checking this box I agree… » > Get Extension Key)
• Allez ensuite dans l’administration : Admin > Système > Magento Connect > Magento Connect Manager
• Coller la clef et installer votre extension

Configurer l’extention :

• Admin > Système > Configuration > Avancé > Admin > WYSIWYG Editor
• Choisissez votre editeur. TyneMCE est très sobre, mais il n’y a pas de gestion d’envoi d’image ! Ce qui est très limité dans un back-office. Il est donc conseillé de prendre FCKEditor.
• FCKeditor Skin > Office 2003 (pour un aspect moins rustique)
• FCKeditor Toolbar Set > Medium (pour éviter d’avoir 40 lignes d’icones qui ne servent pas à grand chose)

Configurer nos propres icones :

Si les 3 set d’icones de vous conviennent pas (il n’y a pas la possibilité de changer les couleurs dans « Medium » par exemple), FCKeditor vous permet de personnaliser votre propre WYSIWYG. Pour cela, il faut modifier le fichier : « /js/fontis/fckeditor/custom_fontis.js »

Vous copiez coller dans le même fichier ce passage (Medium Set) :

// Example 'medium' toolbar set - more than Basic but less than Default.
FCKConfig.ToolbarSets["Medium"] = [
['Source', '-', 'Cut','Copy','Paste','PasteText','PasteWord'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','StrikeThrough','-', 'OrderedList','UnorderedList'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Image','Table','Rule','-','Link','Unlink','Anchor','-','FontFormat']
];

Ensuite en vous inspirant des icones disponibles du Default Set :

FCKConfig.ToolbarSets["Default"] = [
 ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
 ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
 ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
 '/',
 ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
 ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 ['Link','Unlink','Anchor'],
 ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
 '/',
 ['Style','FontFormat','FontName','FontSize'],
 ['TextColor','BGColor'],
 ['FitWindow','ShowBlocks','-','About']        // No comma for the last row.
] ;

Vous vous recréez votre propre WYSIWYG. Exemple du WYSIWYG fournit aux clients :

FCKConfig.ToolbarSets["Perso"] = [
['Source', 'FitWindow', '-', 'Templates','ShowBlocks', '-', 'Paste','PasteText','PasteWord', '-','Undo','Redo','-','SelectAll','RemoveFormat'],
['Subscript','Superscript', '-', 'Blockquote','Table','-','Rule','Anchor'],
'/',
['Bold','Italic','Underline','StrikeThrough','-', 'OrderedList','UnorderedList', '-', 'Outdent','Indent','-', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyFull', '-','Image','Link','Unlink','-','FontFormat','-', 'TextColor','BGColor']
];

Il y a l’ajout de la coloration de la police, de la couleur de background, les citations, l’ajout de flash, les ancres, etc. Tout ceci sans prendre plus de 2 lignes comme la config Medium

Une fois votre fichier custom_fontis modifié, n’oubliez pas d’aller re-configurer l’extension dans le back-office pour choisir votre set d’icones « Perso ».

Problème lié à FCKeditor lors de l’upload des images / fichiers :

L’extension a cependant un problème majeur, le célèbre :

The server didn’t reply with a proper XML data. Please check your configuration.

Ce message apparaît quand on essaye de parcourir le serveur. Si on envoie une image, cela charge dans le vide.

Pour palier ce problème, il faut tout simplement donner les bons droits à vos dossiers/fichiers.

En effet, il vous faut mettre en droit 755 vos dossiers (et sous-dossiers et fichiers, en récursif donc) /media, /app, /var et même /js.

C’est tout !