Magento – Magento 2 – How to add WYSIWYG editor in admin configuration options

admin-panelmagento2wysiwyg

How to add WYSIWYG editor with textarea in the admin system configuration options?

Best Answer

Open your module system.xml from app/code/NameSpace/ModuleName/etc/adminhtml and add following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
    <system>
        <section id="yoursectionid" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Custom Label</label>
            <tab>tabname</tab>
            <resource>NameSpace_ModuleNmae::config_modulename</resource>
            <group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Settings</label>
                <!-- WYSIWYG editor field code start-->
                <field id="editor_textarea" translate="label comment" sortOrder="1" type="editor" showInStore="1" showInDefault="1" >
                    <label>WYSIWYG Editor</label>
                    <frontend_model>NameSpace\ModuleName\Block\Adminhtml\System\Config\Editor</frontend_model>
                </field>
                <!-- WYSIWYG editor field code end-->
            </group>
        </section>
    </system>
</config>

Now create the editor class file Editor.php at app/code/NameSpace/ModuleName/Block/Adminhtml/System/Config folder where we create the WYSIWYG-Editor element:

<?php
namespace NameSpace\ModuleName\Block\Adminhtml\System\Config;

use Magento\Backend\Block\Template\Context;
use Magento\Cms\Model\Wysiwyg\Config as WysiwygConfig;
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;

class Editor extends Field
{
    protected $_wysiwygConfig;

    /**
     * Editor constructor.
     * @param Context $context
     * @param WysiwygConfig $wysiwygConfig
     * @param array $data
     * @codeCoverageIgnore
     */
    public function __construct(
        Context $context,
        WysiwygConfig $wysiwygConfig,
        array $data = []
    ) {
        $this->_wysiwygConfig = $wysiwygConfig;
        parent::__construct($context, $data);
    }

    protected function _getElementHtml(AbstractElement $element)
    {
        // set wysiwyg for element
        $element->setWysiwyg(true);

        // set configuration values
        $element->setConfig($this->_wysiwygConfig->getConfig());

        return parent::_getElementHtml($element);
    }
}

Please let me know if you find any problem.

Related Solutions

Magento – How to add wysiwyg editor to custom frontend form of custom module in Magento1.9

In html

<input type="text" id="custom_wysiwyg" />

Script

<script type="text/javascript">
window.onload=function()
{
   tinyMCE.init({
    mode : "exact",
    elements: "custom_wysiwyg",
    theme : "advanced",
    plugins : "inlinepopups,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
    theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_path_location : "bottom",
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
    theme_advanced_resize_horizontal : 'true',
    theme_advanced_resizing : 'true',
    apply_source_formatting : 'true',
    convert_urls : 'false',
    force_br_newlines : 'true',
    doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'

  });
};
</script>

Hope this helps..

Magento – How to add the WYSIWYG editor in customer form in admin area

Here is what worked for me.
First of all, the attribute education must have the frontend_input set to editor. If you already have the attribute change the value of the frontend_input column in the eav_attribute table to editor.
If you are willing to start from scratch here is a full module that worked for me.
Let's call the module StackExchange_Education.
You will need the following files.

app/etc/modules/StackExchange_Education.xml - the declaration file

<?xml version="1.0"?>
<config>
    <modules>
        <StackExchange_Education>
            <active>true</active>
            <codePool>local</codePool>
            <depends><Mage_Customer/></depends>
        </StackExchange_Education>
    </modules>
</config>

app/code/local/StackExchange/Education/etc/config.xml - the configuration file

<?xml version="1.0"?>
<config>
    <modules>
        <StackExchange_Education>
            <version>1.0.0</version>
        </StackExchange_Education>
    </modules>
    <global>
        <blocks>
            <adminhtml>
                <rewrite>
                    <customer_edit_tab_account>StackExchange_Education_Block_Adminhtml_Customer_Edit_Tab_Account</customer_edit_tab_account><!-- rewrite the account edit block -->
                </rewrite>
            </adminhtml>
        </blocks>
        <resources>
            <stackexchange_education_setup><!-- setup resource for adding the attribute -->
                <setup>
                    <module>StackExchange_Education</module>
                    <class>Mage_Customer_Model_Resource_Setup</class>
                </setup>
            </stackexchange_education_setup>
        </resources>
    </global>
    <adminhtml>
        <layout>
            <updates>
                <stackexchange_education>
                    <file>stackexchange_education.xml</file><!-- layout file for enabling the editor -->
                </stackexchange_education>
            </updates>
        </layout>
    </adminhtml>
</config>

app/code/local/StackExchange/Education/sql/stackexchange_education_setup/install-1.0.0.php - the install script that adds the attribute. If you already have the attribute and you just change the frontend_input to editor you don't need this

<?php
$this->addAttribute('customer', 'education', array(
    'type'      => 'text',
    'label'     => 'Education',
    'input'     => 'editor',
    'position'  => 120,
    'required'  => false,//or true
    'is_system' => 0,
));
$attribute = Mage::getSingleton('eav/config')->getAttribute('customer', 'education');
$attribute->setData('used_in_forms', array(
    'adminhtml_customer',
));
$attribute->setData('is_user_defined', 0);
$attribute->save();

app/code/local/StackExchange/Education/Block/Adminhtml/Customer/Edit/Tab/Account.php - the rewrite of the admin account block

<?php
class StackExchange_Education_Block_Adminhtml_Customer_Edit_Tab_Account extends Mage_Adminhtml_Block_Customer_Edit_Tab_Account
{
    public function initForm()
    {
        parent::initForm();
        $form = $this->getForm();
        $educationElem = $form->getElement('education');
        $educationElem->setConfig(Mage::getSingleton('cms/wysiwyg_config')->getConfig());
        return $this;
    }
}

app/design/adminhtml/default/default/layout/stackexchange_education.xml - the layout file for enabling the editor

<?xml version="1.0"?>
<layout>
    <adminhtml_customer_edit>
        <update handle="editor" />
        <reference name="head">
            <action method="setCanLoadTinyMce"><load>1</load></action>
        </reference>
    </adminhtml_customer_edit>
</layout>

Clear the cache and give it a try.

Best Answer

Related Solutions

Magento – How to add wysiwyg editor to custom frontend form of custom module in Magento1.9

Magento – How to add the WYSIWYG editor in customer form in admin area

Related Topic