2

Is there a way to create a custom widget with WYSIWYG fields? I followed this tutorial here but when I enter data, they are not saved.

5

You follow the this url for creating custom widgets. Now as per your requirement for WYSIWYG editor.

Open widget.xml file and add new parameter, the code is below.

etc/widget.xml

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget" id="toptal_customwidget_samplewidget">
        <label>Toptal Sample Widget</label>
        <description></description>
        <parameters>
            <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text">
                <label>Title</label>
            </parameter>
            <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea">
                <label>Content</label>
            </parameter>
            <parameter name="contentnew" xsi:type="block" visible="true" required="true" sort_order="20" >
                <label>Custom Content</label>
                <block class="Toptal\CustomWidget\Block\Widget\Editor" />
            </parameter>
        </parameters>       
    </widget>
</widgets>

Also, create Editor.php class file

Block/Widget/Editor.php

<?php

/**
 * @copyright Copyright (c) 2016 www.magebuzz.com
 */

namespace Toptal\CustomWidget\Block\Widget;

class Editor extends \Magento\Backend\Block\Widget\Form\Element {

    /**
     * @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;
    }

}

Lastly flush cache

php bin/magento cache:flush

| improve this answer | |
  • 1
    Hello @kishor, I have successfully added TinyMCE editor, but when I add <a> and then try to save my widget, I am getting an error as: Failed to execute 'setStartBefore' on 'Range': parameter 1 is not of type 'Node'. – chirag Feb 18 '19 at 13:29
  • here the source of the solution. github.com/dmatthew/magento2-widget-parameters But the Error reported by @chirag still exists – ZFNerd Mar 4 '19 at 14:48
0

Finally found a solution: the widget had to be inserted via the "Widgets section" of the Admin and not by the "Pages" one. It works fine.

| improve this answer | |

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.