Editor.php

Go to the documentation of this file.

<?php
namespace Magento\Framework\Data\Form\Element;

use Magento\Framework\Escaper;

class Editor extends Textarea
{
    private $serializer;

    public function __construct(
        Factory $factoryElement,
        CollectionFactory $factoryCollection,
        Escaper $escaper,
        $data = [],
        \Magento\Framework\Serialize\Serializer\Json $serializer = null
    ) {
        parent::__construct($factoryElement, $factoryCollection, $escaper, $data);

        if ($this->isEnabled()) {
            $this->setType('wysiwyg');
            $this->setExtType('wysiwyg');
        } else {
            $this->setType('textarea');
            $this->setExtType('textarea');
        }
        $this->serializer = $serializer ?: \Magento\Framework\App\ObjectManager::getInstance()
            ->get(\Magento\Framework\Serialize\Serializer\Json::class);
    }

    protected function getButtonTranslations()
    {
        $buttonTranslations = [
            'Insert Image...' => $this->translate('Insert Image...'),
            'Insert Media...' => $this->translate('Insert Media...'),
            'Insert File...' => $this->translate('Insert File...'),
        ];

        return $buttonTranslations;
    }

    protected function getJsonConfig()
    {
        if (is_object($this->getConfig()) && method_exists($this->getConfig(), 'toJson')) {
            return $this->getConfig()->toJson();
        } else {
            return $this->serializer->serialize(
                $this->getConfig()
            );
        }
    }

    public function getPluginConfigOptions($pluginName, $key = null)
    {
        if (!is_array($this->getConfig('plugins'))) {
            return null;
        }

        $plugins = $this->getConfig('plugins');

        $pluginArrIndex = array_search($pluginName, array_column($plugins, 'name'));

        if ($pluginArrIndex === false || !isset($plugins[$pluginArrIndex]['options'])) {
            return null;
        }

        $pluginOptions = $plugins[$pluginArrIndex]['options'];

        if ($key !== null) {
            return isset($pluginOptions[$key]) ? $pluginOptions[$key] : null;
        } else {
            return $pluginOptions;
        }
    }

    public function getElementHtml()
    {
        $js = '
            <script type="text/javascript">
            //<![CDATA[
                openEditorPopup = function(url, name, specs, parent) {
                    if ((typeof popups == "undefined") || popups[name] == undefined || popups[name].closed) {
                        if (typeof popups == "undefined") {
                            popups = new Array();
                        }
                        var opener = (parent != undefined ? parent : window);
                        popups[name] = opener.open(url, name, specs);
                    } else {
                        popups[name].focus();
                    }
                    return popups[name];
                }

                closeEditorPopup = function(name) {
                    if ((typeof popups != "undefined") && popups[name] != undefined && !popups[name].closed) {
                        popups[name].close();
                    }
                }
            //]]>
            </script>';

        if ($this->isEnabled()) {
            $jsSetupObject = 'wysiwyg' . $this->getHtmlId();

            $forceLoad = '';
            if (!$this->isHidden()) {
                if ($this->getForceLoad()) {
                    $forceLoad = $jsSetupObject . '.setup("exact");';
                } else {
                    $forceLoad = 'jQuery(window).on("load", ' .
                        $jsSetupObject .
                        '.setup.bind(' .
                        $jsSetupObject .
                        ', "exact"));';
                }
            }

            $html = $this->_getButtonsHtml() .
                '<textarea name="' .
                $this->getName() .
                '" title="' .
                $this->getTitle() .
                '" ' .
                $this->_getUiId() .
                ' id="' .
                $this->getHtmlId() .
                '"' .
                ' class="textarea' .
                $this->getClass() .
                '" ' .
                $this->serialize(
                    $this->getHtmlAttributes()
                ) .
                ' >' .
                $this->getEscapedValue() .
                '</textarea>' .
                $js . $this->getInlineJs($jsSetupObject, $forceLoad);

            $html = $this->_wrapIntoContainer($html);
            $html .= $this->getAfterElementHtml();
            return $html;
        } else {
            // Display only buttons to additional features
            if ($this->getPluginConfigOptions('magentowidget', 'window_url')) {
                $html = $this->_getButtonsHtml() . $js . parent::getElementHtml();
                if ($this->getConfig('add_widgets')) {
                    $html .= '<script type="text/javascript">
                    //<![CDATA[
                    require(["jquery", "mage/translate", "mage/adminhtml/wysiwyg/widget"], function(jQuery){
                        (function($) {
                            $.mage.translate.add(' . $this->serializer->serialize($this->getButtonTranslations()) . ')
                        })(jQuery);
                    });
                    //]]>
                    </script>';
                }
                $html = $this->_wrapIntoContainer($html);
                return $html;
            }
            return parent::getElementHtml();
        }
    }

    public function getTheme()
    {
        if (!$this->hasData('theme')) {
            return 'simple';
        }

        return $this->_getData('theme');
    }

    protected function _getButtonsHtml()
    {
        $buttonsHtml = '<div id="buttons' . $this->getHtmlId() . '" class="buttons-set">';
        if ($this->isEnabled()) {
            $buttonsHtml .= $this->_getToggleButtonHtml($this->isToggleButtonVisible());
            $buttonsHtml .= $this->_getPluginButtonsHtml($this->isHidden());
        } else {
            $buttonsHtml .= $this->_getPluginButtonsHtml(true);
        }
        $buttonsHtml .= '</div>';

        return $buttonsHtml;
    }

    protected function _getToggleButtonHtml($visible = true)
    {
        $html = $this->_getButtonHtml(
            [
                'title' => $this->translate('Show / Hide Editor'),
                'class' => 'action-show-hide',
                'style' => $visible ? '' : 'display:none',
                'id' => 'toggle' . $this->getHtmlId(),
            ]
        );
        return $html;
    }

    protected function _getPluginButtonsHtml($visible = true)
    {
        $buttonsHtml = '';

        // Button to widget insertion window
        if ($this->getConfig('add_widgets')) {
            $buttonsHtml .= $this->_getButtonHtml(
                [
                    'title' => $this->translate('Insert Widget...'),
                    'onclick' => "widgetTools.openDialog('"
                        . $this->getPluginConfigOptions('magentowidget', 'window_url')
                        . "widget_target_id/" . $this->getHtmlId() . "/')",
                    'class' => 'action-add-widget plugin',
                    'style' => $visible ? '' : 'display:none',
                ]
            );
        }

        // Button to media images insertion window
        if ($this->getConfig('add_images')) {
            $buttonsHtml .= $this->_getButtonHtml(
                [
                    'title' => $this->translate('Insert Image...'),
                    'onclick' => "MediabrowserUtility.openDialog('"
                        . $this->getConfig('files_browser_window_url')
                        . "target_element_id/" . $this->getHtmlId() . "/"
                        . (null !== $this->getConfig('store_id') ? 'store/'
                            . $this->getConfig('store_id') . '/' : '')
                        . "')",
                    'class' => 'action-add-image plugin',
                    'style' => $visible ? '' : 'display:none',
                ]
            );
        }

        if (is_array($this->getConfig('plugins'))) {
            foreach ($this->getConfig('plugins') as $plugin) {
                if (isset($plugin['options']) && $this->_checkPluginButtonOptions($plugin['options'])) {
                    $buttonOptions = $this->_prepareButtonOptions($plugin['options']);
                    if (!$visible) {
                        $configStyle = '';
                        if (isset($buttonOptions['style'])) {
                            $configStyle = $buttonOptions['style'];
                        }
                        $buttonOptions = array_merge($buttonOptions, ['style' => 'display:none;' . $configStyle]);
                    }
                    $buttonsHtml .= $this->_getButtonHtml($buttonOptions);
                }
            }
        }

        return $buttonsHtml;
    }

    protected function _prepareButtonOptions($options)
    {
        $buttonOptions = [];
        $buttonOptions['class'] = 'plugin';
        foreach ($options as $name => $value) {
            $buttonOptions[$name] = $value;
        }
        $buttonOptions = $this->_prepareOptions($buttonOptions);
        return $buttonOptions;
    }

    protected function _checkPluginButtonOptions($pluginOptions)
    {
        if (!isset($pluginOptions['title'])) {
            return false;
        }
        return true;
    }

    protected function _prepareOptions($options)
    {
        $preparedOptions = [];
        foreach ($options as $name => $value) {
            if (is_array($value) && isset($value['search']) && isset($value['subject'])) {
                $subject = $value['subject'];
                foreach ($value['search'] as $part) {
                    $subject = str_replace('{{' . $part . '}}', $this->getDataUsingMethod($part), $subject);
                }
                $preparedOptions[$name] = $subject;
            } else {
                $preparedOptions[$name] = $value;
            }
        }
        return $preparedOptions;
    }

    protected function _getButtonHtml($data)
    {
        $html = '<button type="button"';
        $html .= ' class="scalable ' . (isset($data['class']) ? $data['class'] : '') . '"';
        $html .= isset($data['onclick']) ? ' onclick="' . $data['onclick'] . '"' : '';
        $html .= isset($data['style']) ? ' style="' . $data['style'] . '"' : '';
        $html .= isset($data['id']) ? ' id="' . $data['id'] . '"' : '';
        $html .= '>';
        $html .= isset($data['title']) ? '<span><span><span>' . $data['title'] . '</span></span></span>' : '';
        $html .= '</button>';

        return $html;
    }

    protected function _wrapIntoContainer($html)
    {
        if (!$this->getConfig('use_container')) {
            return '<div class="admin__control-wysiwig">' .$html . '</div>';
        }

        $html = '<div id="editor' . $this->getHtmlId() . '"'
            . ($this->getConfig('no_display') ? ' style="display:none;"' : '')
            . ($this->getConfig('container_class') ? ' class="admin__control-wysiwig '
                . $this->getConfig('container_class') . '"' : '')
            . '>' . $html . '</div>';

        return $html;
    }

    public function getConfig($key = null)
    {
        if (!$this->_getData('config') instanceof \Magento\Framework\DataObject) {
            $config = new \Magento\Framework\DataObject();
            $this->setConfig($config);
        }
        if ($key !== null) {
            return $this->_getData('config')->getData($key);
        }
        return $this->_getData('config');
    }

    public function translate($string)
    {
        return (string)new \Magento\Framework\Phrase($string);
    }

    public function isEnabled()
    {
        $result = false;
        if ($this->getConfig('enabled')) {
            $result = $this->hasData('wysiwyg') ? $result = $this->getWysiwyg() : true;
        }
        return $result;
    }

    public function isHidden()
    {
        return $this->getConfig('hidden');
    }

    protected function isToggleButtonVisible()
    {
        return !$this->getConfig()->hasData('toggle_button') || $this->getConfig('toggle_button');
    }

    protected function getInlineJs($jsSetupObject, $forceLoad)
    {
        $jsString = '
                <script type="text/javascript">
                //<![CDATA[
                window.tinyMCE_GZ = window.tinyMCE_GZ || {}; 
                window.tinyMCE_GZ.loaded = true;
                require([
                "jquery", 
                "mage/translate", 
                "mage/adminhtml/events", 
                "mage/adminhtml/wysiwyg/tiny_mce/setup", 
                "mage/adminhtml/wysiwyg/widget"
                ], function(jQuery){' .
            "\n" .
            '  (function($) {$.mage.translate.add(' .
            $this->serializer->serialize(
                $this->getButtonTranslations()
            ) .
            ')})(jQuery);' .
            "\n" .
            $jsSetupObject .
            ' = new wysiwygSetup("' .
            $this->getHtmlId() .
            '", ' .
            $this->getJsonConfig() .
            ');' .
            $forceLoad .
            '
                    editorFormValidationHandler = ' .
            $jsSetupObject .
            '.onFormValidation.bind(' .
            $jsSetupObject .
            ');
                    Event.observe("toggle' .
            $this->getHtmlId() .
            '", "click", ' .
            $jsSetupObject .
            '.toggle.bind(' .
            $jsSetupObject .
            '));
                    varienGlobalEvents.attachEventHandler("formSubmit", editorFormValidationHandler);
                    varienGlobalEvents.clearEventHandlers("open_browser_callback");
                    varienGlobalEvents.attachEventHandler("open_browser_callback", ' .
            $jsSetupObject .
            '.openFileBrowser);
                //]]>
                });
                </script>';
        return $jsString;
    }
}