Como adicionar a funcionalidade WYSIWYG aos itens de configuração do Magento

21

Para um determinado módulo personalizado, preciso de um item de configuração para ter um editor WYSIWYG. No momento, estou usando "textarea" no xml do meu sistema para obter uma textarea normal.

Meu palpite é que tenho que adicionar um "frontend_type" extra com base na área de texto para adicionar essa funcionalidade, mas estou me perguntando se existem outras / melhores opções

Rutger
fonte

Respostas:

23

Antes de tudo, adicione isso em qualquer arquivo de layout, para carregar o editor na seção de configuração:

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

Agora crie seu próprio renderizador de campo. Tem que ser um bloco dentro do seu módulo:

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

Agora, para o elemento dentro do system.xml, defina o frontend_type 'editor' e o frontend_model seu novo bloco

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

Há alguns problemas ao alterar o escopo de configuração para um site ou uma exibição de loja. A área de texto não se torna 'desativada'. Mas se você pode ignorar isso, pode usá-lo sem problemas.

Marius
fonte
Excelente resposta, funcionou para mim.
precisa
Isso funcionou assim .. !! 1
balanv
3

Eu queria adicionar isso como um comentário, mas não tenho reputação suficiente. Infelizmente, essa informação é sem dúvida útil para alguém.

Quando implementei a solução do Marius, vi o botão Mostrar / ocultar editor, mas ao clicar nela, recebi um erro de javascript:

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

Uma rápida pesquisa no Google me levou a essa outra pergunta sobre o Magento StackExchange, que sugeria que você precisava de linhas adicionais no layout para carregar todo o javascript necessário na seção de configuração. Incorporar isso à solução da Marius me deu uma atualização de layout que se parece com isso:

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

Aqui está o link para essa outra pergunta: Referência não detectadaErro: tinyMceWysiwygSetup não está definido

Eric Seastrand
fonte
0

Seus addJs adicionais não são necessários aqui. De fato, a maioria dos seus chamados já está no identificador "editor". É por isso que fazemos aqui<update handle="editor"/>

Apenas verifique se a adição está em design> adminhtml e não em design> frontend

Sony
fonte