Magento 구성 항목에 WYSIWYG 기능을 추가하는 방법

특정 사용자 정의 모듈의 경우 WYSIWYG 편집기를 사용하려면 구성 항목이 필요합니다. 현재 시스템 XML에서 "textarea"를 사용하여 일반 textarea를 얻습니다.

내 생각 에이 기능을 추가하기 위해 텍스트 영역을 기반으로 추가 "frontend_type"을 추가해야하지만 다른 / 더 나은 옵션이 있는지 궁금합니다.

우선 레이아웃 섹션에 편집기를 추가하여 구성 섹션에서 편집기를로드하십시오.

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

구성 범위를 웹 사이트 또는 상점보기로 변경할 때 몇 가지 문제가 있습니다. 텍스트 영역이 '비활성화'되지 않습니다. 그러나 이것을 무시할 수 있다면 아무런 문제없이 사용할 수 있습니다.

이것을 주석으로 추가하고 싶었지만 평판이 충분하지 않습니다. 아아,이 정보는 의심 할 여지없이 누군가에게 유용합니다.

Marius의 솔루션을 구현했을 때 Show / Hide Editor 버튼을 보았지만 클릭하면 javascript 오류가 발생했습니다.

Uncaught ReferenceError: tinyMceWysiwygSetup is not defined

빠른 구글 검색으로 나 에게이 다른 magento stackexchange 질문이 생겼습니다. 구성 섹션에 필요한 모든 자바 스크립트를로드하려면 레이아웃에 추가 줄이 필요하다고 제안했습니다. 이것을 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>

다른 질문에 대한 링크는 다음과 같습니다. Uncaught ReferenceError : tinyMceWysiwygSetup이 정의되지 않았습니다

여기에 추가 addJ가 필요하지 않습니다. 실제로 대부분의 전화는 이미 "편집자"핸들에 있습니다. 우리가 여기서 만드는 이유<update handle="editor"/>

추가 한 내용이 디자인> 디자인이 아닌 프론트 엔드> 프론트 엔드에 있는지 확인하십시오.