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.


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.


<?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>
            <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text">
            <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea">
            <parameter name="contentnew" xsi:type="block" visible="true" required="true" sort_order="20" >
                <label>Custom Content</label>
                <block class="Toptal\CustomWidget\Block\Widget\Editor" />

Also, create Editor.php class file



 * @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()])
                ->setConfig($this->_wysiwygConfig->getConfig(['add_variables' => false, 'add_widgets' => false]));

        if ($element->getRequired()) {

                'after_element_html', $this->_getAfterElementHtml() . $editor->getElementHtml()

        return $element;

     * @return string
    protected function _getAfterElementHtml() {
        $html = <<<HTML
        .admin__field-control.control .control-value {
            display: none !important;

        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

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.