So fügen Sie Magento Config-Elementen WYSIWYG-Funktionen hinzu

21

Für ein bestimmtes benutzerdefiniertes Modul benötige ich ein Konfigurationselement, um einen WYSIWYG-Editor zu haben. In diesem Moment verwende ich "textarea" in meinem System-XML, um ein normales Textarea zu erhalten.

Ich schätze, ich muss einen zusätzlichen "frontend_type" basierend auf textarea hinzufügen, um diese Funktionalität hinzuzufügen, aber ich frage mich, ob es andere / bessere Optionen gibt

Rutger
quelle

Antworten:

23

Fügen Sie dies zunächst in eine beliebige Layoutdatei ein, um den Editor im Konfigurationsabschnitt zu laden:

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

Erstellen Sie nun Ihren eigenen Feldrenderer. Es muss ein Block in Ihrem Modul sein:

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

Stellen Sie nun für das Element in der system.xml den frontend_type 'editor' und das frontend_model Ihren neuen Block ein

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

Es gibt einige Probleme beim Ändern des Konfigurationsbereichs in eine Website oder eine Geschäftsansicht. Das Textfeld wird nicht deaktiviert. Wenn Sie dies jedoch ignorieren können, können Sie es problemlos verwenden.

Marius
quelle
Ausgezeichnete Antwort, arbeitete für mich.
Rick Kuipers
Das hat einfach so funktioniert .. !! +1
balanv
3

Ich wollte dies als Kommentar hinzufügen, aber ich habe nicht genug Ruf. Leider sind diese Informationen zweifellos für jemanden nützlich.

Als ich die Lösung von Marius implementiert habe, habe ich die Schaltfläche Editor anzeigen / verbergen gesehen, aber als ich darauf geklickt habe, habe ich einen Javascript-Fehler erhalten:

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

Eine schnelle Google-Suche führte mich zu dieser anderen Frage zum Austausch von Magento-Stapeln, die vorschlug, dass Sie zusätzliche Zeilen in Ihrem Layout benötigen, um das gesamte erforderliche Javascript im Konfigurationsabschnitt zu laden. Wenn ich das mit der Lösung von Marius zusammenarbeite, habe ich ein Layout-Update erhalten, das so aussieht:

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

Hier ist der Link zu dieser anderen Frage: Uncaught ReferenceError: tinyMceWysiwygSetup ist nicht definiert

Eric Seastrand
quelle
0

Ihre zusätzlichen AddJs sind hier nicht erforderlich. In der Tat sind die meisten Ihrer Angerufenen bereits im Handle "Editor". Deshalb machen wir hier<update handle="editor"/>

Stellen Sie einfach sicher, dass sich Ihre Hinzufügung in design> adminhtml und nicht in design> frontend befindet

Sony
quelle