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

Working for other items

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

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'); ?>