Cómo agregar la funcionalidad WYSIWYG a los elementos de configuración de Magento

Para cierto módulo personalizado, necesito un elemento de configuración para tener un editor WYSIWYG. En este momento estoy usando "textarea" en mi sistema xml para obtener un textarea normal.

Supongo que tengo que agregar un "frontend_type" adicional basado en textarea para agregar esta funcionalidad, pero me pregunto si hay otras / mejores opciones

En primer lugar, agregue esto en cualquier archivo de diseño, para cargar el editor en la sección de configuración:

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

Ahora crea tu propio renderizador de campo. Tiene que ser un bloque dentro de su módulo:

<?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);
    }
}

Ahora para el elemento dentro de system.xml, configure el frontend_type 'editor' y el frontend_model su nuevo bloque

<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>

Hay algunos problemas al cambiar el ámbito de configuración a un sitio web o una vista de tienda. El área de texto no se 'deshabilita'. Pero si puede ignorar esto, puede usarlo sin ningún problema.

Quería agregar esto como un comentario, pero no tengo suficiente reputación. Por desgracia, esta información es, sin duda, útil para alguien.

Cuando implementé la solución de Marius, vi el botón Mostrar / Ocultar editor, pero cuando hice clic, recibí un error de JavaScript:

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

Una búsqueda rápida en Google me llevó a esta otra pregunta de magento stackexchange que sugería que necesita líneas adicionales en su diseño para cargar todo el javascript necesario en la sección de configuración. La incorporación de esto con la solución de Marius me dio una actualización de diseño que se ve así:

<!-- 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>

Aquí está el enlace a esa otra pregunta: Error de referencia no capturado: tinyMceWysiwygSetup no está definido

Sus addJs adicionales no son necesarios aquí. De hecho, la mayoría de sus llamadas ya están en el controlador "editor". Por eso hacemos aquí<update handle="editor"/>

Solo asegúrese de que su adición esté en diseño> adminhtml y no en diseño> frontend