Magento Widget – Add WYSIWYG Editor to Custom Widget

widgetwysiwyg

I am attempting to add a WYSIWYG editor to a field within a custom widget. I'm actually able to get the WYSIWYG editor to appear as displayed in the screenshot below:

My problem is that the data from the WYSIWYG editor is not populating the hidden textarea field, so the field contents are blank. (If I click the "Show/Hide" editor so that it is rendering plain HTML and then click "Insert Widget", the field's contents are copied over as expected.)

Am I missing core functionality of the WYSIWYG editor that is preventing the translation from the editor to the textarea field or is there way that I can insert some JS when the WYSIWYG field is added to copy over the editor's contents when the element loses focus?

Here are the relevant portions of my widgets.xml (omitting opening/closing widget tag)

<brands_detailedslide type="city_brands/widget_detailedslide">
    <name>Detailed Slide</name>
    <description type="desc">Creates Markup for a Detailed Slide</description>
    <parameters>
        <slide_content>
            <label>Slide Content</label>
            <visible>1</visible>
            <required>1</required>
            <type>city_brands/widget_slide_wysiwyg</type>
        </slide_content>
    </parameters>
</brands_detailedslide>

Note that the type points to City_Brands_Block_Widget_Slide_Wysiwyg, which contains:

class City_Brands_Block_Widget_Slide_Wysiwyg extends Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element
{
    public function render(Varien_Data_Form_Element_Abstract $element)
    {

        $editor = new Varien_Data_Form_Element_Editor($element->getData());

        //Prevent foreach error that occurs without this
        $editor->getConfig()->setPlugins(array());

        $editor->setId($element->getId());
        $editor->setForm($element->getForm());
        $editor->setWysiwyg(true);
        $editor->setForceLoad(true);

        return parent::render($editor);
    }
}

enter image description here

Best Answer

The problem is that the information is only copied across when you select the button Show/Hide editor and not as you type.

You could build in some JavaScript that copied the content on blur or submitting the form.

Related Solutions

Magento – How to add a (working) widget button to category WYSIWYG editors

@Matthias,

I have created this module for you.

This works for me!

https://github.com/mkdizajn/hairy-tribble

cheers

Magento – Magento 2 Add widget using WYSIWYG field in a custom widget

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

Best Answer

Related Solutions

Magento – How to add a (working) widget button to category WYSIWYG editors

Magento – Magento 2 Add widget using WYSIWYG field in a custom widget

Related Topic