How to add WYSIWYG Editor in Magento system configuration?

Question

I want to add WYSIWYG editor in Magento system configuration.

And also get the value from the that is there option to do this.

Cheers.

Economy

You can use This link to add wysiwyg editor in your configuration fields. – Speedwell

Answer 1

I have found the answer from this post. Thanks to Marius for giving this answer.

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.

Economy

Good description, but very short for a magento beginners like me. Download this sample and edit it as Meenakshi said for 100% working solution: junaidbhura.com/add-color-picker-magento-admin-anywhere – Penile

Answer 2

What you need to do, is add a WYSIWYG editor with its appropriate adminhtml controller. After this, you can load the editor for every configfield you specify.

Try reading this article. It is a step-by-step guide how to add the editor.

Hinz

a link is not an answer: please edit your answer to describe what are the necessary steps, leave the link for reference – Bushwhack

@richardbernards above link reference is for add WYSIWYG editor in admin form.I want to add in system configuration – Economy

The system configuration is one big admin form ;) – Hinz

@Hinz i get WYSIWYG editor bt there is css problem. i cant see perfact structure. what to do for that? – Dirtcheap