How to add WYSIWYG functionality to Magento Config items

Question

For a certain custom module I need a config item to have a WYSIWYG editor. At this moment I am using "textarea" in my system xml to get a normal textarea.

My guess is I have to add an extra "frontend_type" based on textarea to add this functionallity, but I am wondering if there are other/better options

Answer 1

First of all add this in any layout file, to load the editor in the config section:

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

Now create your own field renderer. It has to be a block inside your 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);
    }
}

Now for the element inside the system.xml set the frontend_type 'editor' and the frontend_model your new block

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

There are some issues when changing the config scope to a website or a store view. The textarea does not become 'disabled'. But if you can ignore this, you can use it without any problems.

Answer 2

I wanted to add this as a comment, but I don't have enough reputation. Alas, this information is undoubtedly useful to someone.

When I implemented Marius' solution, I saw the Show/Hide Editor button, but when I clicked it, I got a javascript error:

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

A quick google search led me to this other magento stackexchange question which suggested that you need additional lines in your layout to load all the necessary javascript in the config section. Incorporating this with Marius' solution gave me a layout update that looks like this:

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

Here's the link to that other question: Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

Answer 3

Your additional addJs are not necessary here. Indeed the most of your called are already in the handle "editor". That's why we make here <update handle="editor"/>

Just make sure your adding are in design > adminhtml and not in design > frontend