Comment ajouter la fonctionnalité WYSIWYG aux éléments de configuration Magento

Pour un certain module personnalisé, j'ai besoin d'un élément de configuration pour avoir un éditeur WYSIWYG. En ce moment, j'utilise "textarea" dans mon système xml pour obtenir une zone de texte normale.

Je suppose que je dois ajouter un "frontend_type" supplémentaire basé sur la zone de texte pour ajouter cette fonctionnalité, mais je me demande s'il existe d'autres / meilleures options

Ajoutez d'abord ceci dans n'importe quel fichier de mise en page, pour charger l'éditeur dans la section config:

<adminhtml_system_config_edit>
    <update handle="editor"/>
    <reference name="head">
        <action method="setCanLoadTinyMce"><load>1</load></action>
    </reference>
</adminhtml_system_config_edit>

Créez maintenant votre propre rendu de champ. Ce doit être un bloc à l'intérieur de votre module:

<?php
class Namespace_Module_Block_Adminhtml_System_Config_Editor 
    extends Mage_Adminhtml_Block_System_Config_Form_Field 
    implements Varien_Data_Form_Element_Renderer_Interface {

    protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element) {
        $element->setWysiwyg(true);
        $element->setConfig(Mage::getSingleton('cms/wysiwyg_config')->getConfig());
        return parent::_getElementHtml($element);
    }
}

Maintenant, pour l'élément à l'intérieur du system.xml, définissez le frontend_type 'editor' et le frontend_model votre nouveau bloc

<fieldname translate="label">
    <label>Field label </label>
    <frontend_type>editor</frontend_type>
    <frontend_model>module/adminhtml_system_config_editor</frontend_model>
    <sort_order>150</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>
</fieldname>

Il existe certains problèmes lors de la modification de la portée de la configuration en un site Web ou une vue de magasin. La zone de texte ne devient pas «désactivée». Mais si vous pouvez ignorer cela, vous pouvez l'utiliser sans aucun problème.

Je voulais ajouter ceci en tant que commentaire, mais je n'ai pas assez de réputation. Hélas, cette information est sans aucun doute utile à quelqu'un.

Lorsque j'ai implémenté la solution de Marius, j'ai vu le bouton Afficher / Masquer l'éditeur, mais quand j'ai cliqué dessus, j'ai eu une erreur javascript:

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

Une recherche rapide sur Google m'a conduit à cette autre question de stackexchange magento qui a suggéré que vous avez besoin de lignes supplémentaires dans votre mise en page pour charger tout le javascript nécessaire dans la section config. L'intégration de cela à la solution de Marius m'a donné une mise à jour de la mise en page qui ressemble à ceci:

<!-- Enable wysiwyg for config in admin -->
<adminhtml_system_config_edit>
    <update handle="editor"/>
    <reference name="head">
        <action method="setCanLoadTinyMce"><flag>1</flag></action>
        <!-- Beginning of my additions -->
        <action method="setCanLoadExtJs"><flag>1</flag></action>
        <action method="addJs"><script>mage/adminhtml/variables.js</script></action>
        <action method="addJs"><script>mage/adminhtml/wysiwyg/widget.js</script></action>
        <action method="addJs"><script>lib/flex.js</script></action>
        <action method="addJs"><script>lib/FABridge.js</script></action>
        <action method="addJs"><script>mage/adminhtml/flexuploader.js</script></action>
        <action method="addJs"><script>mage/adminhtml/browser.js</script></action>
        <action method="addJs"><script>prototype/window.js</script></action>
        <action method="addJs"><script>prototype/prototype.js</script></action>
        <action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
        <action method="addItem"><type>js_css</type><name>prototype/windows/themes/magento.css</name></action>
    </reference>
</adminhtml_system_config_edit>

Voici le lien vers cette autre question: Uncaught ReferenceError: tinyMceWysiwygSetup n'est pas défini

Vos addJs supplémentaires ne sont pas nécessaires ici. En effet la plupart de vos appelés sont déjà dans la poignée "éditeur". Voilà pourquoi nous faisons ici<update handle="editor"/>

Assurez-vous simplement que vos ajouts sont dans la conception> adminhtml et non dans la conception> frontend