cancel
Showing results for 
Search instead for 
Did you mean: 

Magento 2.3.2 Pagebuilder HTML Area Not shows Widget and Variable Icons

Magento 2.3.2 Pagebuilder HTML Area Not shows Widget and Variable Icons

Hi Guys,

I faced an issue on M2.3.2 EE that the PageBuilder HTML Area Not shows the Widget and Magento Variable buttons.

Therefore I create a patch by checking the m2.3.3 version.

HTML_WidgetVars (1).png

Patch File: 

--- vendor/magento/module-page-builder/view/adminhtml/web/js/form/element/html-code.js	(date 1568094986000)
+++ vendor/magento/module-page-builder/view/adminhtml/web/js/form/element/html-code.js	(date 1568094986000)
@@ -0,0 +1,47 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'Magento_Ui/js/form/element/textarea',
+    'mage/adminhtml/wysiwyg/widget'
+], function (Textarea) {
+    'use strict';
+
+    var HTML_ID_PLACEHOLDER = 'HTML_ID_PLACEHOLDER';
+
+    return Textarea.extend({
+        defaults: {
+            elementTmpl: 'Magento_PageBuilder/form/element/html-code'
+        },
+
+        /**
+         * Click event for Insert Widget Button
+         */
+        clickInsertWidget: function () {
+            return widgetTools.openDialog(
+                this.widgetUrl.replace(HTML_ID_PLACEHOLDER, this.uid)
+            );
+        },
+
+        /**
+         * Click event for Insert Image Button
+         */
+        clickInsertImage: function () {
+            return MediabrowserUtility.openDialog(
+                this.imageUrl.replace(HTML_ID_PLACEHOLDER, this.uid)
+            );
+        },
+
+        /**
+         * Click event for Insert Variable Button
+         */
+        clickInsertVariable: function () {
+            return MagentovariablePlugin.loadChooser(
+                this.variableUrl,
+                this.uid
+            );
+        },
+    });
+});
--- vendor/magento/module-page-builder/Component/Form/HtmlCode.php	(date 1568094986000)
+++ vendor/magento/module-page-builder/Component/Form/HtmlCode.php	(date 1568094986000)
@@ -0,0 +1,95 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\PageBuilder\Component\Form;
+
+use Magento\Backend\Model\UrlInterface as BackendUrlInterface;
+use Magento\Cms\Helper\Wysiwyg\Images;
+use Magento\Framework\View\Element\UiComponentFactory;
+use Magento\Framework\View\Element\UiComponent\ContextInterface;
+use Magento\Variable\Model\Variable\Config as VariableConfig;
+
+/**
+ * Updates field element with HTML Code specific config
+ */
+class HtmlCode extends \Magento\Ui\Component\Form\Field
+{
+    const HTML_ID_PLACEHOLDER = 'HTML_ID_PLACEHOLDER';
+
+    /**
+     * @var BackendUrlInterface
+     */
+    private $backendUrl;
+
+    /**
+     * @var Images
+     */
+    private $imagesHelper;
+
+    /**
+     * @var VariableConfig
+     */
+    private $variableConfig;
+
+    /**
+     * @var string
+     */
+    private $currentTreePath;
+
+    /**
+     * @param ContextInterface $context
+     * @param UiComponentFactory $uiComponentFactory
+     * @param BackendUrlInterface $backendUrl
+     * @param Images $imagesHelper
+     * @param VariableConfig $variableConfig
+     * @param string $currentTreePath
+     * @param array $components
+     * @param array $data
+     */
+    public function __construct(
+        ContextInterface $context,
+        UiComponentFactory $uiComponentFactory,
+        BackendUrlInterface $backendUrl,
+        Images $imagesHelper,
+        VariableConfig $variableConfig,
+        $currentTreePath = 'wysiwyg',
+        $components = [],
+        array $data = []
+    ) {
+        $this->backendUrl = $backendUrl;
+        $this->imagesHelper = $imagesHelper;
+        $this->variableConfig = $variableConfig;
+        $this->currentTreePath = $currentTreePath;
+        parent::__construct($context, $uiComponentFactory, $components, $data);
+    }
+
+    /**
+     * Prepare component configuration
+     *
+     * @return void
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function prepare()
+    {
+        $config = $this->getData('config');
+        $config['widgetUrl'] = $this->backendUrl->getUrl(
+            'adminhtml/widget/index',
+            [
+                'widget_target_id' => self::HTML_ID_PLACEHOLDER
+            ]
+        );
+        $config['imageUrl'] = $this->backendUrl->getUrl(
+            'cms/wysiwyg_images/index',
+            [
+                'current_tree_path' => $this->imagesHelper->idEncode($this->currentTreePath),
+                'target_element_id' => self::HTML_ID_PLACEHOLDER
+            ]
+        );
+        $config['variableUrl'] = $this->variableConfig->getVariablesWysiwygActionUrl();
+        $this->setData('config', $config);
+        parent::prepare();
+    }
+}
--- vendor/magento/module-page-builder/view/adminhtml/ui_component/pagebuilder_html_form.xml	(date 1574666522000)
+++ vendor/magento/module-page-builder/view/adminhtml/ui_component/pagebuilder_html_form.xml	(date 1574663946764)
@@ -74,7 +74,7 @@
         <settings>
             <label/>
         </settings>
-        <field name="html" formElement="textarea" sortOrder="10">
+        <field name="html" formElement="textarea" sortOrder="10" component="Magento_PageBuilder/js/form/element/html-code" class="Magento\PageBuilder\Component\Form\HtmlCode">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="source" xsi:type="string">page</item>
--- vendor/magento/module-page-builder/view/adminhtml/web/template/form/element/html-code.html	(date 1568094986000)
+++ vendor/magento/module-page-builder/view/adminhtml/web/template/form/element/html-code.html	(date 1568094986000)
@@ -0,0 +1,52 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<div class="admin__control-wysiwig">
+    <div id="buttonspagebuilder_html_form_html" class="buttons-set">
+        <button type="button"
+                class="scalable action-add-widget plugin"
+                click="clickInsertWidget">
+            <span>
+                <span>
+                    <span translate="'Insert Widget...'"/>
+                </span>
+            </span>
+        </button>
+        <button type="button"
+                class="scalable action-add-image plugin"
+                click="clickInsertImage">
+            <span>
+                <span>
+                    <span translate="'Insert Image...'"/>
+                </span>
+            </span>
+        </button>
+        <button type="button"
+                class="scalable add-variable plugin"
+                click="clickInsertVariable">
+            <span>
+                <span>
+                    <span translate="'Insert Variable...'"/>
+                </span>
+            </span>
+        </button>
+    </div>
+</div>
+<textarea class="admin__control-textarea" data-bind="
+    value: value,
+    valueUpdate: valueUpdate,
+    hasFocus: focused,
+    attr: {
+        name: inputName,
+        cols: cols,
+        rows: rows,
+        'aria-describedby': noticeId,
+        placeholder: placeholder,
+        id: uid,
+        disabled: disabled
+    }"
+/>

 

Cheers!