{"id":366,"date":"2016-02-20T12:22:42","date_gmt":"2016-02-20T06:52:42","guid":{"rendered":"http:\/\/www.magewallet.com\/?p=366"},"modified":"2020-03-13T16:09:35","modified_gmt":"2020-03-13T10:39:35","slug":"magento-2-how-to-display-wysiwyg-editor-in-admin-configuration-options","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/magento-2\/magento-2-how-to-display-wysiwyg-editor-in-admin-configuration-options\/","title":{"rendered":"Magento 2 – How to add WYSIWYG editor in admin configuration options?"},"content":{"rendered":"

In this blog post, we learn how to add WYSIWYG editor with textarea in admin system configuration options.<\/p>\n

First we will add one system config field in system.xml file. Use below code to add new field with the type Editor.<\/p>\n

<field id=\"editortextarea\" translate=\"label\" type=\"editor\" sortOrder=\"10\" showInDefault=\"1\" showInWebsite=\"1\" showInStore=\"1\">\r\n\t<label>Textare with WYSIWYG<\/label>\r\n\t<frontend_model>Hiddentechies\\ConfigEditor\\Block\\Adminhtml\\System\\Config\\Editor<\/frontend_model>\r\n<\/field><\/pre>\n
In order display WYSIWYG editor with this textarea we need one frontend block. so you can create editor.php file at below location.<\/p>\n
Hiddentechies\\ConfigEditor\\Block\\Adminhtml\\System\\Config<\/pre>\n
In this block you can write below code snippet.<\/p>\n
<?php\r\n\r\nnamespace Hiddentechies\\ConfigEditor\\Block\\Adminhtml\\System\\Config;\r\n\r\nclass Editor extends \\Magento\\Config\\Block\\System\\Config\\Form\\Field {\r\n\r\n    protected $_wysiwygConfig;\r\n\r\n    public function __construct(\r\n    \\Magento\\Backend\\Block\\Template\\Context $context, \\Magento\\Cms\\Model\\Wysiwyg\\Config $wysiwygConfig, array $data = []\r\n    ) {\r\n        $this->_wysiwygConfig = $wysiwygConfig;\r\n        parent::__construct($context, $data);\r\n    }\r\n\r\n    protected function _getElementHtml(\\Magento\\Framework\\Data\\Form\\Element\\AbstractElement $element) {\r\n        $element->setWysiwyg(true);\r\n        $element->setConfig($this->_wysiwygConfig->getConfig($element));\r\n        return parent::_getElementHtml($element);\r\n    }\r\n\r\n}<\/pre>\n
Now please clear cache file and then go to module system configuration, you will get textarea with WYSIWYG option.<\/p>\n
That’s it.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog post, we learn how to add WYSIWYG editor with textarea in admin system configuration options. First we will add one system config field in system.xml file. Use below code to add new field with the type Editor. <field id=”editortextarea” translate=”label” type=”editor” sortOrder=”10″ showInDefault=”1″ showInWebsite=”1″ showInStore=”1″> <label>Textare with WYSIWYG<\/label> <frontend_model>Hiddentechies\\ConfigEditor\\Block\\Adminhtml\\System\\Config\\Editor<\/frontend_model> <\/field> In order… <\/p>\n
Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":4890,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[81,10],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/366"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=366"}],"version-history":[{"count":3,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/366\/revisions"}],"predecessor-version":[{"id":10932,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/366\/revisions\/10932"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/4890"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}