Skip to content

configure the tiny mce wysiwyg editor

ProcessEight edited this page Jan 14, 2021 · 2 revisions

Configure the TinyMCE WYSIWYG editor

On the edit product page

The description field is an attribute with the frontend_input_type of wysiwyg.

The configuration for the wysiwyg editor is defined in \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Eav::customizeWysiwyg:

    /**
     * Add wysiwyg properties
     *
     * @param ProductAttributeInterface $attribute
     * @param array $meta
     * @return array
     */
    private function customizeWysiwyg(ProductAttributeInterface $attribute, array $meta)
    {
        if (!$attribute->getIsWysiwygEnabled()) {
            return $meta;
        }

        $meta['arguments']['data']['config']['formElement'] = WysiwygElement::NAME;
        $meta['arguments']['data']['config']['wysiwyg'] = true;
        $meta['arguments']['data']['config']['wysiwygConfigData'] = [
            'add_variables' => false,
            'add_widgets' => false,
            'add_directives' => true,
            'use_container' => true,
            'container_class' => 'hor-scroll',
        ];

        return $meta;
    }

That method is called by \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Eav::setupAttributeMeta. To modify any of the properties defined in \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Eav::customizeWysiwyg, we'll need to plugin to the former because the latter has private visibility:

// html/app/code/VendorName/ModuleName/etc/adminhtml/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Eav">
        <plugin sortOrder="10"
                name="pavingDirectProductPageLayoutEav"
                type="PavingDirect\ProductPageLayout\Plugin\Ui\DataProvider\Product\Form\Modifier\EavPlugin"/>
    </type>
</config>
<?php

declare(strict_types=1);

namespace VendorName\ModuleName\Plugin\Ui\DataProvider\Product\Form\Modifier;

class EavPlugin
{
    /**
     * Enables the display of the 'Insert Widgets' button
     * 
     * @param \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Eav $subject
     * @param array                                                      $result
     *
     * @return array
     */
    public function afterSetupAttributeMeta(
        \Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Eav $subject,
        array $result
    ) : array {
        if (isset($result['arguments']) && $result['arguments']['data']['config']['code'] === "description") {
            $result['arguments']['data']['config']['wysiwygConfigData']['add_widgets'] = true;
        }

        return $result;
    }
}

This example enables the display of the 'Insert Widgets' button.

On the category edit page

This is much simpler. You just need to define the properties in a UI Component file:

// html/app/code/ProcessEightAdminhtmlExamples/PassUpdatedParamsToWysiwygField/view/adminhtml/ui_component/cms_page_form.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * ProcessEightAdminhtmlExamples
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this module to newer
 * versions in the future. If you wish to customize this module for your
 * needs please contact ProcessEightAdminhtmlExamples for more information.
 *
 * @copyright   Copyright (c) 2020 ProcessEightAdminhtmlExamples
 * @author      ProcessEightAdminhtmlExamples
 *
 */
-->
<!-- This UI Component file updates the initialisation parameters of the WYSIWYG field in the 'Content' fieldset of the edit CMS page in the admin -->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="content" sortOrder="10">
        <field name="content" formElement="wysiwyg">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <!--
                    /**
                     * Example of how to update the parameters passed to the WYSIWYG form field initialisation logic.
                     * Values defined here are eventually passed to \Magento\Cms\Model\Wysiwyg\Config::getConfig().
                     * See that class for other parameters which can be passed. These are just the most useful.
                     */
                     -->
                    <item name="wysiwygConfigData" xsi:type="array">
                        <!-- Enable or disable the WYSIWYG functionality. Disabling renders the field as a simple textarea -->
                        <item name="enabled" xsi:type="boolean">true</item>
                        <!-- Whether the field is rendered as a WYSIWYG on page load. Set to false means user must click 'Show/Hide Editor' button to switch to WYSIWYG -->
                        <item name="hidden" xsi:type="boolean">false</item>
                        <!-- Show/hide the 'Insert Variables...' button -->
                        <item name="add_variables" xsi:type="boolean">false</item>
                        <!-- Show/hide the 'Insert Widgets...' button -->
                        <item name="add_widgets" xsi:type="boolean">false</item>
                        <!-- Width as a percentage of container -->
                        <item name="width" xsi:type="string">50%</item>
                        <!-- Height in pixels -->
                        <item name="height" xsi:type="string">5000px</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>
Clone this wiki locally