Jak dodać funkcjonalność WYSIWYG do elementów Magento Config

Dla określonego modułu niestandardowego potrzebuję elementu konfiguracji, aby mieć edytor WYSIWYG. W tej chwili używam „textarea” w moim systemie xml, aby uzyskać normalny textarea.

Domyślam się, że muszę dodać dodatkowy „frontend_type” oparty na textarea, aby dodać tę funkcjonalność, ale zastanawiam się, czy istnieją inne / lepsze opcje

Najpierw dodaj to do dowolnego pliku układu, aby załadować edytor w sekcji konfiguracji:

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

Teraz stwórz własny renderer pól. Musi to być blok wewnątrz twojego modułu:

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

Teraz dla elementu w pliku system.xml ustaw „edytor” frontend_type, a model frontend nowy blok

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

Występują pewne problemy przy zmianie zakresu konfiguracji na stronę internetową lub widok sklepu. Obszar tekstowy nie staje się „wyłączony”. Ale jeśli możesz to zignorować, możesz z niego korzystać bez żadnych problemów.

Chciałem dodać to jako komentarz, ale nie mam wystarczającej reputacji. Niestety, ta informacja jest niewątpliwie przydatna dla kogoś.

Kiedy wdrożyłem rozwiązanie Mariusa, zobaczyłem przycisk Pokaż / Ukryj edytor, ale kiedy go kliknąłem, dostałem błąd javascript:

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

Szybkie wyszukiwanie w Google zaprowadziło mnie do tego drugiego pytania dotyczącego wymiany stosu Magento, które sugerowało, że potrzebujesz dodatkowych linii w swoim układzie, aby załadować wszystkie niezbędne javascript w sekcji konfiguracji. Włączenie tego do rozwiązania Mariusa dało mi aktualizację układu, która wygląda następująco:

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

Oto link do tego drugiego pytania: Uncaught ReferenceError: tinyMceWysiwygSetup nie jest zdefiniowany

Twoje dodatkowe addJs nie są tutaj potrzebne. Rzeczywiście większość twoich wywoływanych jest już w uchwycie „edytora”. Dlatego tu robimy<update handle="editor"/>

Upewnij się tylko, że dodawanie jest w projekcie> adminhtml, a nie w projekcie> frontend