Ajouter un éditeur de texte WYSIWYG sous Magento

Dans: Magento

22 juin 2009

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 :

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 !

1 Commentaire pour Ajouter un éditeur de texte WYSIWYG sous Magento

Avatar

Extensions Indispendables pour Magento - Frédéric Martinez

juillet 17th, 2009 à 10 h 15 min

[...] L’envoi de documents est cependant assez hasardeux (FCKeditor : Filemanager), et beaucoup de personnes ont des difficultés à le faire fonctionner à cause d’une modification de droit de fichiers. Pour cela, il existe une solution ici. [...]

Formulaire pour Commenter

Si vous en avez besoin, entourez votre code :

PHP : [php]echo $variable[/php]
XML : [xml]<default></default>[/xml]

Je m'appelle Frédéric Martinez.

Je suis Freelance Magento, fondateur de l'agence web e-commerce PH2M et anciennement étudiant en Master MIAGE à Toulouse.

Ce site présente mes réalisations professionnelles, personnelles et universitaires.

Magento Certified Developer Plus

rss_32 twitter_32 Magento

  • Vincent MARMIESSE: Bonjour, Attention depuis Magento 1.9.2.0, les blocs CMS sont en cache ! Cela ne pose pas de pro [...]
  • Java2dev: Bonjour, pour l'Etape 1 a quel niveau on met les codes? dans quel folder et c'est un fichier a edit [...]
  • manuel: Bonjour Frédéric, j'aimerais savoir comment enlever l'option de ( signature obligatoire ) de mon m [...]
  • Arsene: Bonjour a tous, j'aimerais savoir comment créer un module qui propose des options d'assurance su [...]
  • Frédéric Martinez: @Thomas : Il y aura toujours de la perte sur les personnes ne retournant pas sur la page de success. [...]