Magentoの構成アイテムにWYSIWYG機能を追加する方法

21

特定のカスタムモジュールの場合、WYSIWYGエディターを使用するには構成アイテムが必要です。現時点では、システムxmlで「textarea」を使用して通常のテキストエリアを取得しています。

私の推測では、この機能を追加するにはtextareaに基づいて余分な「frontend_type」を追加する必要がありますが、他の/より良いオプションがあるかどうか疑問に思っています

configuration

— ラトガー
ソース

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>

構成スコープをWebサイトまたはストアビューに変更する場合、いくつかの問題があります。テキストエリアは「無効」になりません。ただし、これを無視できる場合は、問題なく使用できます。

— マリウス
ソース

素晴らしい答え、私のために働いた。

— リックカイパーズ

これはちょうどそのように働いた.. !! +1

— balanv 14年

3

これをコメントとして追加したかったのですが、評判が十分ではありません。残念ながら、この情報は間違いなく誰かにとって有用です。

Mariusのソリューションを実装すると、[エディターの表示/非表示]ボタンが表示されましたが、クリックするとjavascriptエラーが発生しました。

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

簡単なグーグル検索により、この他の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>

他の質問へのリンクは次のとおりです。UncaughtReferenceError：tinyMceWysiwygSetup is not defined

— エリック・イーストランド
ソース

0

ここでは、追加のaddJは必要ありません。実際、呼び出された人のほとんどはすでにハンドル「エディタ」にいます。それがここで作る理由です<update handle="editor"/>

あなたの追加がデザイン>フロントエンドではなくデザイン> adminhtmlにあることを確認してください

— ソニー
ソース