1

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

1
+25

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

| improve this answer | |
  • I change block class file only. – Msquare Feb 13 at 12:27
  • I want to enable the widget option in wysiwyg editor – Jancy Abraham Feb 14 at 3:29
  • @JancyAbraham Yes above code is for wysiwyg editor in widget – Msquare Feb 14 at 4:12
  • I need to implement the Widet option in the wysiwyg editor in widget. – Jancy Abraham Feb 14 at 7:56
  • @JancyAbraham you have to modify Editor.php because this file provide wysiwyg editor – Msquare Feb 14 at 7:59
0

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'); ?>
| improve this answer | |
  • This code only adding WYSIWYG editor – Jancy Abraham Feb 18 at 3:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.