WYSIWYG Editor Issue in UI Component multi row not working
-
16-04-2021 - |
Question
I have created dynamic rows with multiple descriptions filed(1 In a row) with the WYSIWYG editor.
Editor showing and working with first one-row element and rest element which added by adding more it's not working.
I have added a dynamic row by below code
<dynamicRows name="dynamic_rows">
<settings>
<addButtonLabel translate="true">Add More</addButtonLabel>
<additionalClasses>
<class name="admin__field-wide">true</class>
</additionalClasses>
<componentType>dynamicRows</componentType>
</settings>
<container name="record" component="Magento_Ui/js/dynamic-rows/record">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="isTemplate" xsi:type="boolean">true</item>
<item name="is_collection" xsi:type="boolean">true</item>
<item name="componentType" xsi:type="string">container</item>
</item>
</argument>
<field name="category_description" formElement="wysiwyg" sortOrder="40">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="wysiwygConfigData" xsi:type="array">
<item name="height" xsi:type="string">100px</item>
<item name="add_variables" xsi:type="boolean">false</item>
<item name="add_widgets" xsi:type="boolean">false</item>
<item name="add_images" xsi:type="boolean">false</item>
<item name="add_directives" xsi:type="boolean">false</item>
</item>
<item name="source" xsi:type="string">sun_brand</item>
</item>
</argument>
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<label translate="true">Description</label>
<dataScope>description</dataScope>
</settings>
<formElements>
<wysiwyg class="Magento\Ui\Component\Form\Element\Wysiwyg">
<settings>
<rows>8</rows>
<wysiwyg>true</wysiwyg>
</settings>
</wysiwyg>
</formElements>
</field>
<actionDelete sortOrder="50">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="componentType" xsi:type="string">actionDelete</item>
<item name="dataType" xsi:type="string">text</item>
<item name="fit" xsi:type="boolean">false</item>
<item name="label" xsi:type="string">Actions</item>
<item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>
<item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete</item>
</item>
</argument>
</actionDelete>
</container>
</dynamicRows>
But show/hide button not working, when we add two rows it's working perfectly with a single row
Solution
Most likely, you've got the same ID of toggle
set on your WYSIWYG editors. Take a look at where the button is built in \Magento\Framework\Data\Form\Element\Editor, particularly where the element's ID is set:
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;
}
The getHtmlID function is thus:
public function getHtmlId()
{
$suffix = $this->getConfig('dynamic_id') ? '${ $.wysiwygUniqueSuffix }' : '';
return parent::getHtmlId() . $suffix;
}
If you don't configure a Dynamic ID on your editor, then the editor's toggle button will have a generic ID of toggle
, and you'll get undesired behavior if you have two identical IDs on the same page.
I'd try adding this to your wysiwygConfigData item:
<item name="dynamic_id" xsi:type="boolean">true</item>