Magento 2 – How to Add WYSIWYG Functionality in Custom Module

adminmagento2modulewysiwyg

Today I'm using the textarea to fields in my custom module, but I want to improve with the WYSIWYG.

How could I use WYSIWYG in a custom field in the admin configuration panel that my module creates?

Thanks

Best Answer

Add following code in your file.

app/code/Namespace/Modulename/Block/Adminhtml/ModuleFolder/Edit/Tab/Main.php

protected $wysiwyg;

public function __construct(
    \Magento\Cms\Model\Wysiwyg\Config $wysiwyg
    ){
       $this->wysiwyg = $wysiwyg;
     }

$fieldset->addField(
            'fieldname',
            'editor',
            [
                'name' => 'fieldname',
                'label' => __('Fieldname'),
                'title' => __('Fieldname'),
                 'config'    => $this->wysiwyg->getConfig(),
                'wysiwyg'   => true
            ]
        );

Done. You can see WYSIWYG in your Admin form of your Custom Module.

Related Solutions

forms – Show WYSIWYG Button Below Custom Category Attribute

Your renderer should extend the Mage_Adminhtml_Block_Catalog_Helper_Form_Wysiwyg. That is the one used for rendering textareas in the category add/edit form.
You can see that from the method Mage_Adminhtml_Block_Catalog_Category_Tab_Attributes::_getAdditionalElementTypes

protected function _getAdditionalElementTypes()
{
    return array(
        'image' => Mage::getConfig()->getBlockClassName('adminhtml/catalog_category_helper_image'),
        'textarea' => Mage::getConfig()->getBlockClassName('adminhtml/catalog_helper_form_wysiwyg')
    );
}

This means that for elements that don't have a specified renderer, the ones referred in this method are used.

Magento – Integrate WYSIWYG TinyMCE in Admin Custom Module and Contact Us / CMS Page

It looks like your page is missing the inclusion of the widget.js file. This is normally added in the admin section based on the layout handle editor.

<action method="addJs"><script>mage/adminhtml/wysiwyg/widget.js</script></action>

I would suggest that for you custom page you also add the editor layout handle to include add the js and css required.

<your_customer_handle>
    <update handle="editor"/>
</your_customer_handle>

Best Answer

Related Solutions

forms – Show WYSIWYG Button Below Custom Category Attribute

Magento – Integrate WYSIWYG TinyMCE in Admin Custom Module and Contact Us / CMS Page

Related Topic