Magento 2 Add widget using WYSIWYG field in a custom widget

Question

I have created a custom widget and it contains a WYSIWYG field. Everything works fine except the add widget option.

When I add the widget it will displayed in the editor. When I click the save button, it redirects to the admin dashboard.

I have followed the below url to create WYSIWYG field in custom widget.

Magento 2.1: create a WYSIWYG field in a custom widget

How can I fix this?

Here is the issue

enter image description here

Working for other items enter image description here

Answer 1

app/code/VendoreName/ModuleName

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::MODULE,
 'VendoreName_ModuleName',
 __DIR__
);

app/code/VendoreName/ModuleName/etc

module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 <module name="VendoreName_ModuleName" setup_version="1.0.0">
 </module>
</config>

app/code/VendoreName/ModuleName/etc/adminhtml

routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
 <router id="admin">
 <route id="widget" frontName="widget">
 <module name="VendoreName_ModuleName" />
 </route>
 </router>
</config>

app/code/VendoreName/ModuleName/etc/frontend

routes.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
 <router id="standard">
 <route frontName="widget" id="widget">
 <module name="VendoreName_ModuleName"/>
 </route>
 </router>
</config>

app/code/VendoreName/ModuleName/etc

widget.xml

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:widget:Magento_Widget:etc/widget.xsd">
 <widget class="VendoreName\ModuleName\Block\Widget\Posts" id="widget_posts">
 <label>Blog Posts</label>
 <description>Posts</description>
 <parameters>
 <parameter name="posts" sort_order="10" visible="true" xsi:type="text">
 <label>Custom Posts Label</label>
 </parameter>
 <parameter name="contentnew" xsi:type="block" visible="true" required="true" sort_order="20" >
 <label>Custom Content</label>
 <block class="VendoreName\ModuleName\Block\Widget\Editor" />
 </parameter>
 </parameters>
 </widget>
</widgets>

app/code/VendoreName/ModuleName/Block/Widget

Posts.php

<?php
namespace VendoreName\ModuleName\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Posts extends Template implements BlockInterface {
 protected $_template = "widget/posts.phtml";
}

app/code/VendoreName/ModuleName/Block/Widget

Editor.php

<?php
namespace VendoreName\ModuleName\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Editor extends Template implements BlockInterface
{
 /**
 * @var \Magento\Cms\Model\Wysiwyg\Config
 */
 protected $_wysiwygConfig;
 /**
 * @var Factory
 */
 protected $_factoryElement;
 /**
 * @param Factory $factoryElement
 * @param CollectionFactory $factoryCollection
 * @param array $data
 */
 public function __construct(
 \Magento\Backend\Block\Template\Context $context,
 \Magento\Framework\Data\Form\Element\Factory $factoryElement,
 \Magento\Cms\Model\Wysiwyg\Config $wysiwygConfig,
 $data = []
 ) {
 $this->_factoryElement = $factoryElement;
 $this->_wysiwygConfig = $wysiwygConfig;
 parent::__construct($context, $data);
 }
 /**
 * Prepare chooser element HTML
 *
 * @param \Magento\Framework\Data\Form\Element\AbstractElement $element Form Element
 * @return \Magento\Framework\Data\Form\Element\AbstractElement
 */
 public function prepareElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
 {
 $editor = $this->_factoryElement->create('editor', ['data' => $element->getData()])
 ->setLabel('')
 ->setForm($element->getForm())
 ->setWysiwyg(true)
 ->setConfig($this->_wysiwygConfig->getConfig(['add_variables' => false, 'add_widgets' => false]));
 if ($element->getRequired()) {
 $editor->addClass('required-entry');
 }
 $element->setData(
 'after_element_html', $this->_getAfterElementHtml() . $editor->getElementHtml()
 );
 return $element;
 }
 /**
 * @return string
 */
 protected function _getAfterElementHtml()
 {
 $html = <<<HTML
 <style>
 .admin__field-control.control .control-value {
 display: none !important;
 }
 </style>
 HTML;
 return $html;
 }
}

app/code/VendoreName/ModuleName/Block/view/frontend/templates/widget

posts.phtml

<h1>Hello widget </h1>
<h2 class='posts'><?php echo $block->getData('posts'); ?></h2>
<h2 class='contentnew'><?php echo $block->getData('contentnew'); ?></h2>
<p>This is sample widget. Perform your code here.</p>

Click here to show

Above code is running perfectly

• Msquare: I change block class file only.
• Jancy Abraham: I want to enable the widget option in wysiwyg editor
• Msquare: @JancyAbraham Yes above code is for wysiwyg editor in widget
• Jancy Abraham: I need to implement the Widet option in the wysiwyg editor in widget.
• Msquare: @JancyAbraham you have to modify Editor.php because this file provide wysiwyg editor

Answer 2

Do the following things,it will add custom widget with WYSIWYG editor.

Step 1: app\code\VendorName\ModuleName\etc\widget.xml

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:widget:Magento_Widget:etc/widget.xsd">
 <widget class="VendorName\ModuleName\Block\Widget\CustomWidget" id="custom_widget">
 <label>Custom Widget</label>
 <parameters>
 <parameter name="textfield" sort_order="10" visible="true" xsi:type="text">
 <label>Text Label</label>
 </parameter>
 <parameter name="content" xsi:type="block" visible="true" required="true" sort_order="20" >
 <label>Custom Content</label>
 <block class="VendorName\ModuleName\Block\Widget\Editor" />
 </parameter>
 </parameters>
 </widget>
</widgets>

Step 2: app\code\VendorName\ModuleName\Block\Widget\Editor.php

<?php
namespace VendorName\ModuleName\Block\Widget;
class Editor extends \Magento\Backend\Block\Template
{
 protected $_elementFactory;
 /**
 * @param \Magento\Backend\Block\Template\Context $context
 * @param \Magento\Framework\Data\Form\Element\Factory $elementFactory
 * @param array $data
 */
 public function __construct(
 \Magento\Backend\Block\Template\Context $context,
 \Magento\Framework\Data\Form\Element\Factory $elementFactory,
 array $data = []
 ) {
 $this->_elementFactory = $elementFactory;
 parent::__construct($context, $data);
 }
 /**
 * Prepare chooser element HTML
 *
 * @param \Magento\Framework\Data\Form\Element\AbstractElement $element Form Element
 * @return \Magento\Framework\Data\Form\Element\AbstractElement
 */
 public function prepareElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
 {
 $input = $this->_elementFactory->create("textarea", ['data' => $element->getData()]);
 $input->setId($element->getId());
 $input->setForm($element->getForm());
 $input->setClass("widget-option input-textarea admin__control-text");
 if ($element->getRequired()) {
 $input->addClass('required-entry');
 }
 $element->setData('after_element_html', $input->getElementHtml());
 return $element;
 }
}

Step 3: app\code\VendorName\ModuleName\Block\Widget\CustomWidget.php

<?php
namespace VendorName\ModuleName\Block\Widget;
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class CustomWidget extends Template implements BlockInterface {
 protected $_template = "widget/customwidget.phtml";
}

Step 4: app\code\VendorName\ModuleName\view\frontend\widget\CustomWidget.phtml

<?php echo $block->getData('textfield'); ?>
<?php echo $block->getData('content'); ?>

• Jancy Abraham: This code only adding WYSIWYG editor