-
-
Notifications
You must be signed in to change notification settings - Fork 2
configure the tiny mce wysiwyg editor
ProcessEight edited this page Jan 14, 2021
·
2 revisions
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.
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>