Bagaimana cara menambahkan fungsionalitas WYSIWYG ke item Magento Config

21

Untuk modul khusus tertentu saya memerlukan item konfigurasi untuk memiliki editor WYSIWYG. Saat ini saya menggunakan "textarea" di xml sistem saya untuk mendapatkan textarea normal.

Dugaan saya adalah saya harus menambahkan "frontend_type" tambahan berdasarkan textarea untuk menambahkan functionallity ini, tapi saya bertanya-tanya apakah ada pilihan lain / lebih baik

Rutger
sumber

Jawaban:

23

Pertama-tama tambahkan ini di file tata letak apa pun, untuk memuat editor di bagian konfigurasi:

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

Sekarang buat renderer bidang Anda sendiri. Itu harus menjadi blok di dalam modul Anda:

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

Sekarang untuk elemen di dalam system.xml atur frontend_type 'editor' dan frontend_model blok baru Anda

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

Ada beberapa masalah ketika mengubah ruang lingkup konfigurasi ke situs web atau tampilan toko. Textarea tidak menjadi 'cacat'. Tetapi jika Anda dapat mengabaikan ini, Anda dapat menggunakannya tanpa masalah.

Marius
sumber
Jawaban yang sangat bagus, bekerja untuk saya.
Rick Kuipers
Ini berhasil begitu saja .. !! +1
balanv
3

Saya ingin menambahkan ini sebagai komentar, tetapi saya tidak memiliki reputasi yang cukup. Sayangnya, informasi ini tidak diragukan lagi bermanfaat bagi seseorang.

Ketika saya mengimplementasikan solusi Marius, saya melihat tombol Show / Hide Editor, tetapi ketika saya mengkliknya, saya mendapat kesalahan javascript:

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

Pencarian google cepat membawa saya ke pertanyaan stackexchange magento lain ini yang menyarankan bahwa Anda memerlukan baris tambahan dalam tata letak Anda untuk memuat semua javascript yang diperlukan di bagian konfigurasi. Menggabungkan ini dengan solusi Marius memberi saya pembaruan tata letak yang terlihat seperti ini:

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

Inilah tautan ke pertanyaan lain itu: Referensi Tidak Diperhatikan Kesalahan: tinyMceWysiwygSetup tidak ditentukan

Eric Seastrand
sumber
0

AddJ tambahan Anda tidak diperlukan di sini. Memang sebagian besar panggilan Anda sudah ada di "editor" pegangan. Itu sebabnya kami buat di sini<update handle="editor"/>

Pastikan saja penambahan Anda di desain> adminhtml dan bukan di desain> frontend

Sony
sumber