如何将所见即所得功能添加到Magento Config项目

21

对于某些自定义模块，我需要一个配置项才能具有WYSIWYG编辑器。目前，我在系统xml中使用“ textarea”来获取正常的textarea。

我的猜测是我必须基于textarea添加一个额外的“ frontend_type”来添加此功能，但是我想知道是否还有其他/更好的选择

configuration

— 罗格
source

23

首先，将其添加到任何布局文件中，以在config节中加载编辑器：

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

现在创建您自己的字段渲染器。它必须是模块内部的一个块：

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

现在为system.xml中的元素设置frontend_type'editor'和frontend_model您的新块

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

将配置范围更改为网站或商店视图时会出现一些问题。文本区域不会被“禁用”。但是，如果您可以忽略它，则可以毫无问题地使用它。

— 马里斯
source

很好的答案，为我工作。

— Rick Kuipers 2013年

就像那样工作.. !! +1

— balanv

3

我想将此添加为评论，但是我没有足够的声誉。las，此信息无疑对某人有用。

实施Marius解决方案时，我看到了“显示/隐藏编辑器”按钮，但是当我单击它时，出现了JavaScript错误：

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

快速的Google搜索使我想到了另一个magento stackexchange问题，该问题建议您在布局中需要其他行以在config部分中加载所有必需的javascript。将此与Marius的解决方案结合在一起，可以得到如下所示的布局更新：

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

这是另一个问题的链接：未捕获的ReferenceError：未定义tinyMceWysiwygSetup

— 埃里克·西斯特兰德
source

0

您在此处不需要其他addJ。确实，您呼叫的大多数人已经在句柄“编辑器”中。这就是为什么我们在这里做<update handle="editor"/>

只要确保您添加的内容是在设计> adminhtml中，而不是在设计>前端中

— 了索尼
source